scroll up/down to sections with fixed buttons

问题

I want to build a script for scrolling up/down to section tag of page. My source code looks like this:

HTML:

<div class="move">
    <div class="previous">UP</div>
    <div class="next">DOWN</div>
</div>
<section>First</section>
<section>Second</section>
<section>Third</section>
<section>Fourth</section>

CSS:

section{
    height: 400px;
    border: 1px solid black;
}

.move{
    position: fixed;
    bottom: 0;
    right: 0;
}

I also have two buttons which are fixed at the bottom of the page.

Now I want to make a script for scroll up/down to sections. What if somebody refresh web page in situation - for example section 2 will be at the top of the page? How to determine which section is currently nearest top of the page?

Here is fiddle.

回答1:

The following example uses the current scroll position of the page to determine which section element needs to be scrolled to rather than an explicit variable, which would become out of sync if the user were to manually scroll to a different section then press the nav buttons.

$(function() {
    var $window = $(window);
    $('.next').on('click', function(){
        $('section').each(function() {
            var pos = $(this).offset().top;   
            if ($window.scrollTop() < pos) {
                $('html, body').animate({
                    scrollTop: pos
                }, 1000);
                return false;
            }
        });
    });

    $('.previous').click(function(){
        $($('section').get().reverse()).each(function() {
            var pos = $(this).offset().top;   
            if ($window.scrollTop() > pos) {
                $('html, body').animate({
                    scrollTop: pos
                }, 1000);
                return false;
            }
        });
    });
});

Working example: JSFiddle

回答2:

You can add ID to each of your section and then scroll to them something like this:

var elem = 0;
$('.next').click(function(){
    ++elem;
    if(elem < 0) elem = 1;
     $('html, body').animate({
        scrollTop: $("section[id=sec"+elem+"]").offset().top
    }, 2000);  
});

$('.previous').click(function(){
     --elem;
    if(elem < 0) elem = 1;
     $('html, body').animate({
        scrollTop: $("section[id=sec"+elem+"]").offset().top
    }, 2000);  
});

JSFiddle

Also you should limit the elem variable so your scroller is ended it shouldn't count up.

回答3:

Here is my version,

there answer is correct but if they refresh the page, it wont know which one is currently active.

I didn't fully test this though, and I don't know if it is necessary to scroll again after load because jsfiddle can't do a manual refresh.

JSFIDDLE

if(window.location.hash !=""){

  var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+"";
  var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+"";

 $('html, body').animate({
        scrollTop: $(""+window.location.hash+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".previous").attr("data-target",scrollIdPrev);
        $(".next").attr("data-target",scrollIdNext);
    });

}

$('.next').click(function(){

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+"";


    $('html, body').animate({
        scrollTop: $(""+scrollId+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".previous").attr("data-target",scrollId);
        $(".next").attr("data-target",window.location.hash);
    });

});

$('.previous').click(function(){

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+"";

    $('html, body').animate({
        scrollTop: $(""+scrollId+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".next").attr("data-target",scrollId);
        $(".previous").attr("data-target",window.location.hash);
    });

});

EDIT: Oh, and there are still bug here, if you press up and your in the first it will have an error, just put a checker if the prev or next exist. By using .length();

来源：https://stackoverflow.com/questions/19444717/scroll-up-down-to-sections-with-fixed-buttons