我在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
或整个帖子的顶部?
试试这段代码......其中id是换行
var id = "get your id here";
jQuery("html, body").animate({
scrollTop : jQuery(id).offset().top
}, 1800);
谢谢 !
您可以通过将其顶部窗口偏移为$(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>