Question

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

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

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

编辑： jQuery scroll to element上的解决方案在这种情况下不起作用。所以＆＃34;可能重复＆＃34;请求应该被忽略。

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或整个帖子的顶部？

Answer 1

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

请参阅此工作代码段

＆＃13;

$(".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');
})

＆＃13;

<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>

＆＃13;

Answer 2

尝试此代码...其中id是wrap

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

谢谢！

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

2 个答案: