如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
你可以尝试在这个Fiddle中使用JShttp://jsfiddle.net/5bNmH/1/
在页脚中添加“转到顶部”按钮:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>
其他回答
动机
这个简单的解决方案在本地工作,并实现了到任何位置的平滑滚动。
它避免了使用锚链接(带有#的链接),在我看来,如果你想链接到一个部分,这些链接是有用的,但在某些情况下不是很舒服,特别是当指向顶部时,这可能会导致两个不同的URL指向同一位置(http://www.example.org和http://www.example.org/#).
解决方案
在要滚动到的标记中添加一个id,例如第一个部分,它回答了这个问题,但id可以放在页面的任何位置。
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>
然后,作为一个按钮,您可以使用链接,只需使用如下代码编辑onclick属性即可。
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
其中document.getElementById的参数是单击后要滚动到的标记的id。
你不需要JQuery。只需调用脚本
window.location = '#'
单击“转到顶部”按钮
示例演示:
输出.jsbin.com/fakumo#
PS:当你使用像angularjs这样的现代库时,不要使用这种方法。这可能会破坏URL散列。
使用window.scrowlTo(0,0);速度非常快所以我尝试了Mark Ursino的例子,但在Chrome中什么都没有发生我找到了这个
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});
测试了所有3种浏览器,并正常工作我正在使用蓝图css这是当客户点击“立即预订”按钮并且没有选择租赁期时,慢慢移动到日历所在的顶部,并打开一个指向2个字段的对话框div,3秒后它会消失
试试这个
<script>
$(window).scrollTop(100);
</script>
您可以简单地使用链接中的目标,例如#someid,其中#someid是div的id。
或者,您可以使用任何数量的滚动插件,使其更加优雅。
http://plugins.jquery.com/project/ScrollTo是一个例子。