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

fhity93d 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(120)

我在onAppend函数中使用以下代码滚动到任何页面的顶部。
滚动应该在点击播放按钮并开始加载YouTube视频后启动-该函数具有工作正常的onAppend事件...
所以我只需要滚动功能。现在我试图实现这个代码只是我所有的单一WordPress的职位。

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

来源：https://stackoverflow.com/questions/47907311/how-to-scroll-to-top-of-my-single-pages-with-jquery

2条答案

按热度按时间

wlp8pajw1#

你可以滚动到一个元素通过传递它的顶部窗口偏移量作为$(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>

赞(0）回复(0）举报 2023-04-19

fkaflof62#

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

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

谢谢！

赞(0）回复(0）举报 2023-04-19

我来回答

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

2条答案

相关问题

热门标签

最新问答