縦に長いサイトでフローティング表示しているボタンを押した際、次のセクションまたは前のセクションへスクロールするボタンを実装したいです。

Question

以前質問されていた内容に近いのですが、縦に長いサイトでフローティングで次へと戻るというボタンを配置し、スクロール位置により次のセクションへすすんだり、前のセクションにもどったりするようなモノを実装したいのですが、スクロールの値を取得して・・・という感じになるのかな・・と漠然とは考えるのですがjavascriptの知識が乏しく、似たような動きのものをカスタマイズしようとしてもなかなか上手く行きません。

どなたかご教授いただけないでしょうか？

https://teratail.com/questions/9525

コチラの動きで一個前のセクションに戻るボタンを追加した感じのモノです。

よろしくお願い致します。

Answer 1

https://teratail.com/questions/9525のものから。

var idx = -1;
var sectionPos = 0;
var scrollTop = 0;
var targetTop = 0;
$(function(){
    //対象要素を検索するためのインデックス取得
    $(window).on("load scroll", function(e){
        $(".section").each(function(index, ele){
            sectionPos = $(ele).offset().top;
            scrollTop = $(window).scrollTop();
            idx = -1;
            if(sectionPos > scrollTop){
                idx = index;
                return false;
            }
        });
    });
    //進む
    $("#next_btn").on("click", function(e){
        if($(".section").eq(idx).is("*") && idx >= 0){
            targetTop = $(".section").eq(idx).offset().top;
            $("html, body").animate({scrollTop:targetTop}, "normal");
        }
        return false;
    });

    //戻る処理
    $("#back_btn").on("click", function(e){
        if($(".section").eq(idx-1).is("*") && idx-1 >= 0){
            targetTop = $(".section").eq(idx-1).offset().top;
            $("html, body").animate({scrollTop:targetTop}, "normal");
        }
        return false;
    });
});

なお、今回は移動先の要素にsectionというクラス、次へボタンにnext_btnというIDが設定してあるものとしているのに加え、戻るボタンにはback_btnというIDが設定してあるものとしています。

Comments

[dox2kei]

ShunsukeIzui様
迅速な回答ありがとうございました。理想とする動きができそうです。
ありがとうございました。