Question

我正在尝试在单击元素时使页面向下滚动150px。因此，假设您大约在页面中滚动了一半。您单击此链接，它将向下滑动150个像素。

这可以用jQuery吗？

我一直在看scrollTop和scrollTo插件，但我似乎无法连接点。

Answer 1

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

Answer 2

请检查一下：

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

单击元素时，滚动条将从当前位置滚动

150px用于向下滚动150px

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

Answer 4

你可能会追随Ariel Flesler的scrollTo插件做得非常好。

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

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

Answer 6

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

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

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

6 个答案: