Pertanyaan gulir ke atas / bawah ke bagian dengan tombol tetap


Saya ingin membuat skrip untuk menggulir ke atas / bawah ke bagian tag halaman. Kode sumber saya terlihat seperti ini:

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

Saya juga memiliki dua tombol yang diperbaiki di bagian bawah halaman.

Sekarang saya ingin membuat skrip untuk menggulir ke atas / bawah ke bagian. Bagaimana jika seseorang me-refresh halaman web dalam situasi - misalnya bagian 2 akan berada di bagian atas halaman? Bagaimana cara menentukan bagian mana yang paling dekat di bagian atas halaman?

Ini biola.


4
2017-10-18 08:12


asal


Jawaban:


Contoh berikut menggunakan posisi gulir halaman saat ini untuk menentukan elemen bagian mana yang perlu digulirkan ke bukan variabel eksplisit, yang akan menjadi tidak sinkron jika pengguna secara manual menggulir ke bagian yang berbeda lalu menekan tombol nav.

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

Contoh kerja: JSFiddle


3
2017-10-18 08:56



Anda dapat menambahkan ID ke setiap bagian Anda dan kemudian gulir ke mereka sesuatu seperti ini:

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

Juga Anda harus membatasi elem variabel sehingga scroller Anda berakhir seharusnya tidak dihitung.


2
2017-10-18 08:33



Ini versi saya,

ada jawaban yang benar tetapi jika mereka me-refresh halaman, tidak akan tahu yang mana yang sedang aktif.

Saya tidak sepenuhnya menguji ini, dan saya tidak tahu apakah perlu untuk menggulir lagi setelah dimuat karena jsfiddle tidak dapat melakukan penyegaran manual.

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, dan masih ada bug di sini, jika Anda menekan dan Anda di pertama itu akan memiliki kesalahan, hanya menempatkan pemeriksa jika prev atau selanjutnya ada. Dengan menggunakan .length ();


2
2017-10-18 09:25