Question

我确信这是一个非常常见的问题，但经过大量研究后，我似乎无法找到答案。

所以只是一点警告;我真的很喜欢javascript和jQuery等。

问题！我正在尝试应用您单击的两个图像，它会滚动到下一个或上一个部分。

为了概述它的外观，这里是HTML的一部分：

        <div id="scrollbuttons">
            <a href="#"><img id="prev" src="pics/prev.png"></img></a>
            <a href="#"><img id="next" src="pics/next.png"></img></a>
        </div>

并且：

<div id="work">
    <p class="maintext">blabla</p>
</div>
<div id="gallery">
    <p class="maintext">blabla</p>
</div>
<div id="project">
    <p class="maintext">blabla</p>
</div>
<div id="finish">
    <p class="maintext">blabla</p>
</div>

Javascript：

var actual = "work";
$("#prev").on("click",function(e){
    e.preventDefault();
var $prev = $("#"+actual).prev();
    if($prev.length == 0){
    return;
    }
    actual = $prev.attr("id");
       $('html, body').animate({
        scrollTop: $prev.offset().top
    }, 1000);

});

$("#next").on("click",function(e){
    e.preventDefault();
var $next = $("#"+actual).next();
    if($next.length == 0){
    return;
    }
    actual = $next.attr("id");
       $('html, body').animate({
        scrollTop: $next.offset().top
    }, 1000);

});

所以我要创建的是当你点击“下一步”时，页面应该顺畅地自动滚动到第一个“工作”，然后滚动到“画廊”等。

当您按“上一步”时，页面应该再次平滑并自动滚动回到上一点。

我有最新的jQuery版本，如果不是绝对需要，我不想安装插件。

所以我希望这是足够的信息来获得一些帮助，我真的很感激，因为我是JS的新手。

提前致谢

/ Emil Nilsson

Answer 1

你最好使用插件，因为他们已经发明了方向盘：jQuery ScrollTo 如果您不想使用该插件，您仍然可以通过检查非缩小版本的代码来学习它。

Answer 2

我认为您应该引入类似于类名的指示符来确定当前活动部分，并在单击“上一个”或“下一个”时将该类与滚动一起移动。

$('#scrollbuttons a').click(function (e) {
    e.preventDefault();
    var el, pos, active = $('#sectionContainer .active');

    if ($(this).is('#prev')) {
        el = active.prev();
    } else {
        el = active.next();
    }

    if (el.length) {
        pos = el.offset().top;
        $('html, body').animate({
            scrollTop: pos
        }, 1000);
        el.addClass('active').siblings().removeClass('active');
    }
});

请参阅demo。

如果您要将此与scroll()事件进行整合，则还需要在scrollTop到达某个部分时移动该指标：

$(window).scroll(function(){
    var winTop = $(this).scrollTop();
    $('#sectionContainer div').each(function(){
        var elTop = $(this).offset().top,
            elHeight = $(this).height();
        if(winTop >= elTop && winTop < elTop + elHeight){
            $(this).addClass('active').siblings().removeClass('active');
        }
    });
});

使用滚动条demo。

滚动到单击部分

2 个答案: