如何使用JavaScript滚动到页面顶部?即使滚动条立即跳到顶部也是可取的。我不是在寻找平滑的滚动。
使用JavaScript滚动到页面顶部吗?
You can try using JS as in this Fiddle http://jsfiddle.net/5bNmH/1/
Add the "Go to top" button in your page footer:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>
None of the answers above will work in SharePoint 2016.
It has to be done like this : https://sharepoint.stackexchange.com/questions/195870/
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
Non-jQuery solution / pure JavaScript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
This will work:
window.scrollTo(0, 0);
$(document).scrollTop(0);
also works.
Try this
<script>
$(window).scrollTop(100);
</script>
$(".scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}
.scrolltop{
position:fixed;
right:10px;
bottom:10px;
color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>
老#top
可以做到的
document.location.href = "#top";
在FF,IE和Chrome中正常运行
真的很奇怪:这个问题已经存在了五年,现在还没有可用于滚动动画的JavaScript答案……因此,您可以开始:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
如果愿意,可以将其包装在函数中,然后通过onclick
属性进行调用。检查这个jsfiddle
注意:这是一个非常基本的解决方案,可能不是性能最高的解决方案。可以在这里找到一个非常详细的示例:https : //github.com/cferdinandi/smooth-scroll
如果要进行平滑滚动,请尝试以下操作:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
另一个解决方案是JavaScript window.scrollTo方法:
window.scrollTo(x-value, y-value);
参数:
- x值是沿水平轴的像素。
- y值是沿垂直轴的像素。
平滑滚动,纯JavaScript:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
尝试此滚动顶部
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>
您不需要jQuery即可执行此操作。一个标准的HTML标签就足够了...
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
如果您不需要更改以进行动画处理,则无需使用任何特殊的插件-我只需要使用本机JavaScript window.scrollTo方法-传入0,0即可将页面立即滚动到左上角。
window.scrollTo(x-coord, y-coord);
参量
- x坐标是沿水平轴的像素。
- y-coord is the pixel along the vertical axis.
激活所有浏览器。祝好运