如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
非jQuery解决方案/纯JavaScript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
其他回答
当顶部滚动条顶部小于限制底部,且底部到顶部滚动条标题为粘滞时。下面参见Fiddle示例。
var lastScroll = 0;
$(document).ready(function($) {
$(window).scroll(function(){
setTimeout(function() {
var scroll = $(window).scrollTop();
if (scroll > lastScroll) {
$("header").removeClass("menu-sticky");
}
if (scroll == 0) {
$("header").removeClass("menu-sticky");
}
else if (scroll < lastScroll - 5) {
$("header").addClass("menu-sticky");
}
lastScroll = scroll;
},0);
});
});
https://jsfiddle.net/memdumusaib/d52xcLm3/
您可以简单地使用链接中的目标,例如#someid,其中#someid是div的id。
或者,您可以使用任何数量的滚动插件,使其更加优雅。
http://plugins.jquery.com/project/ScrollTo是一个例子。
如果你不需要更改动画,那么你就不需要使用任何特殊的插件——我只需要使用原生JavaScript window.scrollTo()方法——传入0,0将立即将页面滚动到左上角。
window.scrollTo(xCoord, yCoord);
参数
xCoord是沿水平轴的像素。yCoord是沿垂直轴的像素。
许多用户建议同时选择html和body标签以实现跨浏览器兼容性,如下所示:
$('html, body').animate({ scrollTop: 0 }, callback);
如果你指望回调只运行一次,这可能会让你绊倒。它实际上会运行两次,因为您选择了两个元素。
如果这对你来说是个问题,你可以这样做:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}
这在Chrome$('html')中有效的原因。scrollTop()返回0,但在其他浏览器(如Firefox)中无效。
如果滚动条已经位于顶部,您不想等待动画完成,请尝试以下操作:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
有趣的是,其中大多数根本不适合我,所以我使用了jQuery-ScrollTo.js:
wrapper.find(".jumpToTop").click(function() {
$('#wrapper').ScrollTo({
duration: 0,
offsetTop: -1*$('#container').offset().top
});
});
它奏效了$(document).sollTop()返回了0,而这个函数实际上起了作用。
推荐文章
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数
- 将RGB转换为白色的RGBA
- 如何将“camelCase”转换为“Camel Case”?
- 我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗?
- 如何使用JavaScript重新加载ReCaptcha ?
- jQuery。由于转义了JSON中的单引号,parseJSON抛出“无效JSON”错误
- 在JavaScript关联数组中动态创建键
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?