我想平滑地向下滚动。我不想为此写一个函数——特别是如果jQuery已经有了一个。
当前回答
你可以使用.animate() scrollTop属性,就像这样:
$("html, body").animate({ scrollTop: "300px" });
其他回答
你可以使用.animate() scrollTop属性,就像这样:
$("html, body").animate({ scrollTop: "300px" });
尼克的回答很管用。在animate()调用中指定complete()函数时要小心,因为它将被执行两次,因为你声明了两个选择器(html和body)。
$("html, body").animate(
{ scrollTop: "300px" },
{
complete : function(){
alert('this alert will popup twice');
}
}
);
下面是避免双重回调的方法。
var completeCalled = false;
$("html, body").animate(
{ scrollTop: "300px" },
{
complete : function(){
if(!completeCalled){
completeCalled = true;
alert('this alert will popup once');
}
}
}
);
试试scrollTo插件。
我有什么我相信是一个更好的解决方案比$('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);
}
}
}
);
}
}
你可以使用jQuery动画滚动页面与特定的持续时间:
$("html, body").animate({scrollTop: "1024px"}, 5000);
其中1024px是滚动偏移量,5000是以毫秒为单位的动画持续时间。
推荐文章
- 右击是Javascript事件吗?
- 如何找到JavaScript数组中包含的最大数字?
- 在数组中获取所有选中的复选框
- 如何为Firebase构建云函数,以便从多个文件部署多个函数?
- 如何发送推送通知到web浏览器?
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- 用jQuery检查Internet连接是否存在?
- 如何使用滑动(或显示)函数在一个表行?