jQuery：如何在单击时将页面向下滚动一定间隔（以像素为单位）？

Question

我想在元素被点击时使页面向下滚动150像素，即使当前位置已经滚动了一半。例如，您大约已经滚动了一半的页面，您单击该链接，它将再向下滑动150个像素。

使用jQuery可以实现吗？

我一直在研究scrollTop和scrollTo插件，但似乎无法理清思路。

- bcWeb

---

很想看看你正在处理的代码，它可能已经完成了大部分工作，只是存在一个简单的问题。 - Chuck Vose

我还没有展示代码。作为一种替代方案，我正在滚动到特定的#ID，但是我正在尝试通过从你所在的位置往下滚动150像素来使其更加动态化。 - bcWeb

Answer 1

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

- Mohamed Hafez

---

谢谢，这对我有效，实现了页面下滑的效果。`var y = $(window).scrollTop();$("html, body").animate({ scrollTop: y + $(window).height() }, 600);` - The HCD

点击“加”按钮可以向下滚动滚动条，从而将页面向上移动，以查看页面的下部分。点击“减”按钮可以向上滚动滚动条，从而将页面向下移动，以查看页面的上部分。（我相信只有那些在思考中犯了两个错误并互相抵消的人才能一次性正确理解这个操作。） - Bob Stein

Answer 2

只需要检查这个：

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

当您点击元素时，它将使滚动条从当前位置滚动。

而150px用于向下滚动150px。

- Yatin Khullar

---

你在答案中提到的 += 对我解决了一个类似的问题非常有帮助。 - NetOperator Wibby

该死，这个 += 东西就是我所需要的！（我是 JS 新手）。你应该被授予诺贝尔奖。 - Mexicanoon

那个 '+=150px' 真的很棒，它既简洁又清晰。太喜欢了！ - Joshua Pinter

在调用.animate()之前，调用.stop()可能有助于防止两个滚动动画同时运行（这将导致闪烁效果）。 - Thomas Kekeisen

$('html, body').animate({scrollTop: '+=150px'}, 800); 这就是我所需要的！ - Azmol

Answer 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

- Mahesh Velaga

---

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

Answer 4

你可能需要 Ariel Flesler 的 scrollTo 插件，它在此方面表现得非常出色。

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

- JVDL

---

这里提到的**scrollTo插件的相对px版本完美地解决了问题。相对px(hash)方法允许您指定不同的left和top**值。 - Jeremy

Answer 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);
}

- Martin54

Answer 6

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

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

- Pixelomo