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

2 人关注

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

滚动应该在播放按钮被点击和youtube视频开始加载后启动--该函数有一个 onAppend 事件，工作正常。

所以我只需要滚动功能。现在我试着将这段代码实现在我所有的单篇Wordpress文章中。

编辑： 关于 jQuery滚动到元素的解决方案在这种情况下不起作用。所以 "可能的重复 "请求应该被忽略。

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或整个文章的顶部？


           
            
             
              
               DanteTheSmith
              
              ：


            
             
              
               
                你想在什么地方启动一个滚动？你能向结构展示一下多篇文章在HTML中的样子吗？它们有一个包装器吗？它们有独特的ID吗？  你是在它们内部还是完全从其他地方启动滚动？我认为这些都是回答问题的必要条件，现在只是猜测。你说的页面顶部是指整个页面的顶部，还是只指某些帖子？


            
             
              
               
                @DanteTheSmith - 我将更新我的问题...


            
             
              
               
                在你的动画周围添加一些条件，以检查你是否在一个帖子上。


            
             
              
               
                @DanteTheSmith - 我更新了这个问题。是的，有一个带有ID的包装。它应该足以滚动到#single-post-wrapper。滚动应该在点击播放按钮和youtube视频开始加载后启动--该函数有一个onAppend事件，工作正常...所以我只需要滚动函数。


            
             
              
               
                可能与
                
                 jQuery滚动到元素
                
                重复


            
             
              
               
                @mr.void - 我把代码放到了custom.js文件中。我不知道如何在Wordpress或so....中给这个函数加上一个条件，比如 "如果是单一的"，我只尝试滚动到#single-post-wrapper...


            
             
              
               
                @MoshFeu - 你提到的答案在我的案例中不起作用。


            
             
              
               
                这正是你刚刚接受的答案。


           
            
             
              
               你可以通过传递它的顶部窗口偏移量作为
               
                
                 $(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> 
扩展片段
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="subComments___2FmoI"&gt;&lt;div class="main___24sYp"&gt;&lt;div class="name___85mbA"&gt;&lt;a class="reviewerLink___2jSlZ" href="https://stackoverflow.com/users/9036446/evavienna" title="evavienna" target="_blank" rel="noopener nofollow"&gt;evavienna&lt;/a&gt;：&lt;/div&gt;&lt;div class="content___38THn"&gt;&lt;div class="sub_comments_one"&gt;&lt;span class="comment-copy"&gt;谢谢--可以了。但@aravind的回答很完美。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="main___2afui"&gt;&lt;div class="info___2dyKv"&gt;&lt;div class="commentInfo___1616D"&gt;&lt;a class="reviewerLink___1Y5EL" href="https://stackoverflow.com/users/9002163/aravind-s" title="Aravind S" target="_blank" rel="noopener nofollow"&gt;&lt;img class="avatar___3gRVO" src="https://i.stack.imgur.com/QcPiZ.jpg?s=64&amp;amp;g=1" title="Aravind S" alt="Aravind S" referrerpolicy="no-referrer"/&gt;&lt;div class="name___1XGg4"&gt;Aravind S&lt;/div&gt;&lt;/a&gt;&lt;div class="time___2OtLQ"&gt;发布于 &lt;!-- --&gt;2017-12-20&lt;/div&gt;&lt;/div&gt;&lt;div class="acceptTag___3dJ7g"&gt;已采纳&lt;/div&gt;&lt;/div&gt;&lt;div class="vote___3mJ3W"&gt;0&lt;!-- --&gt; 人赞同&lt;/div&gt;&lt;div class="main___1IDZm htmlViewer___2iaXC"&gt;&lt;div class="comments_one_context"&gt;&lt;div class="s-prose js-post-body" itemprop="text"&gt;
&lt;p&gt;试试这段代码......其中id是包装的意思 &lt;/p&gt;
&lt;pre class="default s-code-block"&gt;&lt;code class="" id=""&gt;&lt;code class="hljs language-objectivec"&gt;            var &lt;span class="hljs-keyword"&gt;id&lt;/span&gt; = &lt;span class="hljs-string"&gt;"get your id here"&lt;/span&gt;;