如何使用jQuery滚动到我的单个页面的顶部?

问题描述 投票:2回答:2

我在onAppend函数中使用以下代码滚动到任何页面的顶部。

单击一个播放按钮并且youtube vid开始加载后,滚动应该会触发 - 该函数有一个onAppend事件,工作正常...

所以我只需要滚动功能。现在我尝试将这个代码实现到我的所有单个Wordpress帖子中。

编辑:jQuery scroll to element的解决方案在这种情况下不起作用。因此,应忽略“可能重复”的请求。

var body = jQuery("html, body");
    body.stop().animate({scrollTop:0}, 500, function() { 
    // alert("Finished animating");
}); 

单个帖子的HTML看起来像

<html prefix="og: http://ogp.me/ns#" lang="en-US">
    <head>...</head>
    <body class="post-template-default single single-post postid-880">
        <nav id="menu" class="xs-menu">....</nav>
        <div id="single-post-wrapper" class="single-post-class">
        ...
        </div>
    </body>
</html>

任何想法如何只滚动到Wordpress中的单个帖子的顶部 - 例如到#single-post-wrapper或整个帖子的顶部?

javascript jquery html wordpress
2个回答
0
投票

试试这段代码......其中id是换行

            var id = "get your id here";
            jQuery("html, body").animate({
               scrollTop : jQuery(id).offset().top
            }, 1800);

谢谢 !


1
投票

您可以通过将其顶部窗口偏移为$(selector).offset().top来滚动到元素

请参阅此工作代码段

$(".stop").on("click",function(e){
  $('html, body').animate({
		scrollTop:0}, 'slow');
});


$(".spost").on("click",function(e){
  $('html, body').animate({
		scrollTop:$("#single-post-wrapper").offset().top
    }, 'slow');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<button class="stop">scroll to top</button>
    <button class="spost">scroll to single-post-wrapper</button>
    
    <div class="post-template-default single single-post postid-880">
        <nav id="menu" class="xs-menu">menu</nav>
        <br><br><br><br><br>
        <div id="single-post-wrapper" class="single-post-class">
      single-post-wrapper<button class="stop">scroll to top</button>  <br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
        </div>
    </div>
    
    
    <button class="stop">scroll to top</button>
    <button class="spost">scroll to single-post-wrapper</button>
    
</div>    
© www.soinside.com 2019 - 2024. All rights reserved.