我想平滑地向下滚动。我不想为此写一个函数——特别是如果jQuery已经有了一个。
当前回答
$(".scroll-top").on("click", function(e){
e.preventDefault();
$("html, body").animate({scrollTop:"0"},600);
});
其他回答
你可以使用.animate() scrollTop属性,就像这样:
$("html, body").animate({ scrollTop: "300px" });
试试scrollTo插件。
在其他例子中,动画总是从页面刷新后的页面顶部开始。
我通过不直接动画css来修复这个问题,而是调用window.scrollTo();每一步:
$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
duration: 600,
easing: 'swing',
step: function(val) {
window.scrollTo(0, val);
}
});
这也解决了html vs body的问题,因为它使用跨浏览器的JavaScript。
关于jQuery的animate函数的更多信息,请访问http://james.padolsey.com/javascript/fun-with-jquerys-animate/。
如果你想在页面的末尾向下移动(所以你不需要向下滚动到底部),你可以使用:
$('body').animate({ scrollTop: $(document).height() });
我有什么我相信是一个更好的解决方案比$('html,身体')黑客。
这不是一行程序,但我用$('html, body')遇到的问题是,如果在动画期间记录$(window). scrolltop(),你会看到值到处跳,有时是数百个像素(尽管我在视觉上没有看到任何类似的情况)。我需要值是可预测的,这样如果用户在自动滚动时抓住滚动条或旋转鼠标滚轮,我就可以取消动画。
下面是一个平滑滚动动画的函数:
function animateScrollTop(target, duration) {
duration = duration || 16;
var scrollTopProxy = { value: $(window).scrollTop() };
if (scrollTopProxy.value != target) {
$(scrollTopProxy).animate(
{ value: target },
{ duration: duration, step: function (stepValue) {
var rounded = Math.round(stepValue);
$(window).scrollTop(rounded);
}
});
}
}
下面是一个更复杂的版本,它将在用户交互时取消动画,以及重新发射,直到达到目击值,这在试图立即设置scrollTop时很有用(例如,简单地调用$(window).scrollTop(1000) -以我的经验,这在大约50%的情况下失败。)
function animateScrollTop(target, duration) {
duration = duration || 16;
var $window = $(window);
var scrollTopProxy = { value: $window.scrollTop() };
var expectedScrollTop = scrollTopProxy.value;
if (scrollTopProxy.value != target) {
$(scrollTopProxy).animate(
{ value: target },
{
duration: duration,
step: function (stepValue) {
var roundedValue = Math.round(stepValue);
if ($window.scrollTop() !== expectedScrollTop) {
// The user has tried to scroll the page
$(scrollTopProxy).stop();
}
$window.scrollTop(roundedValue);
expectedScrollTop = roundedValue;
},
complete: function () {
if ($window.scrollTop() != target) {
setTimeout(function () {
animateScrollTop(target);
}, 16);
}
}
}
);
}
}
推荐文章
- Angular ng-repeat反过来
- 如何获得请求路径与表达请求对象
- 使用Handlebars 'each'循环访问父对象的属性
- 盎格鲁- ngcloak / ngg展示blink元素
- 禁用表单自动提交按钮单击
- 节点和错误:EMFILE,打开的文件太多
- JavaScript函数中的默认参数值
- 使用RegExp.exec从字符串中提取所有匹配项
- 测试一个值是奇数还是偶数
- 空数组似乎同时等于true和false
- 它是可能的动画scrollTop与jQuery?
- 我需要哪个选择器来选择一个文本选项?
- 如何清除下拉框中的所有选项?
- 如何添加ID属性Html.BeginForm()在asp.net mvc?
- 基于原型的继承与基于类的继承