jQuery：单击时向下滚动页面设置增量（以像素为单位）？答案

【问题标题】：jQuery: Scroll down page a set increment (in pixels) on click?jQuery：单击时向下滚动页面设置增量（以像素为单位）？
【发布时间】：2011-02-09 04:51:53
【问题描述】：

我试图在单击元素时使页面从当前位置向下滚动 150 像素。因此，假设您将页面向下滚动大约一半。单击此链接，它会将您向下滑动 150 像素。

这可以用 jQuery 实现吗？

我一直在研究 scrollTop 和 scrollTo 插件，但我似乎无法将这些点联系起来。

【问题讨论】：

很高兴看到你正在使用的代码，它可能大部分都在那里，只是一个简单的问题。
我还没有要显示的代码。作为替代解决方案，我正在向下滚动到特定的#ID，但我试图通过从您所在的位置向下滚动 150 像素来使其更具动态性。

标签： jquery

【解决方案1】：

var y = $(window).scrollTop();  //your current y position on the page
$(window).scrollTop(y+150);

【讨论】：

谢谢，这对我有用.. 用于一种向下翻页效果。 var y = $(window).scrollTop(); $("html, body").animate({ scrollTop: y + $(window).height() }, 600);
添加向下移动滚动条，向上移动页面，以查看页面的下部。减向上移动滚动条，向下移动页面以查看页面的较高部分。（我相信唯一能第一次做对的人是那些在他们的想法中犯了两个错误的人，他们抵消了。）

【解决方案2】：

只需检查一下：

$(document).ready(function() {
    $(".scroll").click(function(event){
        $('html, body').animate({scrollTop: '+=150px'}, 800);
    });
});

当你的元素被点击时，它会让滚动条从当前位置滚动

而150px用于向下滚动150px

【讨论】：

您回答中的+= 对我遇到的类似问题有很大帮助。
该死，这 += 东西就是我所需要的！（我是 JS 新手）。你应该获得诺贝尔奖。
'+=150px' 非常漂亮，并且不会为了简洁而牺牲清晰度。喜欢它！
在.animate()之前调用.stop()可能有助于防止两个滚动动画同时运行（这会导致闪烁效果）
$('html, body').animate({scrollTop: '+=150px'}, 800);这就是我所需要的！

【解决方案3】：

您可以使用animate 来执行此操作，如下链接所示：

http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery

如果您想使用scrollTo 插件来实现，请查看以下内容：

How to scroll the window using JQuery $.scrollTo() function

【讨论】：

这两个似乎都是从浏览器顶部开始设置的增量，而不是从您当前查看的位置开始。

【解决方案4】：

您可能会追求 Ariel Flesler 的 scrollTo 插件做得非常好的东西。

http://demos.flesler.com/jquery/scrollTo/

【讨论】：

这里提到的 scrollTo 插件 的relative px 版本应该可以完美解决问题。 relative px(hash) 方法将允许您从 top 指定差异 left b> 价值。

【解决方案5】：

适用于新手或其他任何人的纯 js 解决方案。

var scrollAmount = 150;
var element = document.getElementById("elem");

element.addEventListener("click", scrollPage);

function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}

【讨论】：

【解决方案6】：

避免冲突的HCD解决方案的更新版本：

var y = $j(window).scrollTop(); 
$j("html, body").animate({ scrollTop: y + $j(window).height() }, 600);

【讨论】：