javascript - スクロール中にdivを表示し、動作を変更します

Question

私はこれを時々見たことがありますが、それを実現する方法や検索する方法がわかりません。それが私がそれが何をするのかを説明したい理由です：

画像と矢印があり、それが下向きで、クリックするとページが下にスクロールするとします。下にスクロールして指定したポイントに到達すると、矢印が上を向き、ページの上部に戻ります。

返信ありがとうございます=）

編集：私は例を見つけました。下部にある小さな矢印と、ページの最後に到達した場合の変化を確認してください。rorymcilroy.com

Answer 1

jQueryScrollToプラグインを使用できます

これがデモです

これがあなたが望むもののためのjsfiddleデモです（scrollToプラグインを使用して）

jsfiddleデモ

javascript：

$('#upDownArrow').click(function() {
    if($(this).hasClass("arrowUp")) {
        $.scrollTo( '#top', 500); // scroll to top      
        $(this).removeClass("arrowUp");
        $(this).addClass("arrowDown");
    } else {
        $.scrollTo( '#bottom', 500); // scroll to bottom
        $(this).removeClass("arrowDown");
        $(this).addClass("arrowUp");     
    }
});

html：

<div id="#top"></div>
<div id="upDownArrow" class="arrowDown"><div class="arrow"></div></div>

<!-- add your content here -->

<div id="#bottom"></div>

css：

#upDownArrow {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 30px;
    height: 30px;
    background: #33B;
}
#upDownArrow:hover {
    background: #99F;
    cursor: pointer;
}

#upDownArrow.arrowDown:hover .arrow {
    border-top-color: #99F;   
}

#upDownArrow.arrowUp:hover .arrow {
    border-bottom-color: #99F;   
}

#upDownArrow.arrowUp .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-bottom: 15px solid #33B;
    top: -30px;
}

#upDownArrow.arrowDown .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-top: 15px solid #33B;
    bottom: -30px;
}

前/次のボタンが必要な場合は、次のようにステップスルーする必要があるアイテム/ ID /位置のリストを作成する必要がある場合があります（scrollToプラグインのドキュメントを参照して使用できるパラメーターを確認してください）。

var steps = ["top","part1","part2","bottom"];

次に、2つのボタンを作成します。1つは上用、もう1つは下用で、次を使用します。

var currentPosition = 0;

$("#buttonUp").click(function() {
    if(currentPosition == 0) {
        currentPosition = steps.length-1;
    } else {
        currentPosition--;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

$("#buttonDown").click(function() {
    if(currentPosition == steps.length-1) {
        currentPosition = 0;
    } else {
        currentPosition++;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

これが上下ボタン付きのデモです：

上下のjsfiddleデモ

フルスクリーンの上下のjsfiddleデモ

ここに、スクロールの「ボタン変更」を使用した別のデモがあります;）

jsfiddleボタンはデモを変更します

Answer 2

私があなたを正しく理解していれば、この質問はあなたの質問と同じです。

Answer 3

私はしばらく前にこれを書きました。それがあなたが探しているものだと思います。

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),  // get id of target div from link e.g #one #two 
        oset  = $(href).offset().top;   // get the offset top of the div
    $('html, body').stop().animate({
        scrollTop : oset  // animate the scrollTop property to the offset of target div
    }, 1000, function () {   
        location.hash = href; // change the hash to target div  
    });
});