JavaScriptの練習テクニック:簡単で実用的なジャンプページから指定された位置へ

かつて、私たちがページ内をスクロールするとき、とても面倒で、ページのスクロール距離を判断したり、各種タイマー、条件判断などを使ったりする必要がありました.
例えば、小さなものが上部に戻ります.最も簡単な方法は、ハイパーリンクテープ#を使用して、上部に戻ることができますが、スクロール効果はありません.

backtop

よしDOMの方法だscrollIntoView()は簡単にできます.

element.scrollIntoView(); //    element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean   
element.scrollIntoView(scrollIntoViewOptions); // Object   

scrollIntoView()メソッドでは、要素の親コンテナがスクロールされ、element要素がユーザーに表示されます.
パラメータの説明:
alignToTop:オプション値、Boolean.

trueでは、要素の先端がスクロール領域の表示領域の先端に位置合わせされます.対応するscrollIntoView:{block:[start],inline:[nearest]}これはこのパラメータのデフォルトです.

falseでは、要素の下端がスクロール領域の表示領域の下端に整列します.対応するscrollIntoView:{block:[end],inline:[nearest]}

scrollIntoViewOptions:オプション値、次の属性を含むオブジェクト:

behavior:オプションで、アニメーションの遷移効果、autoまたはsmoothのいずれかを定義します.デフォルトはautoです.smoothは、ジャンプしてもスクロール効果が得られるので、強くお勧めします.

block:オプションで、垂直方向の位置合わせ、「start」、「center」、「end」、または「nearest」のいずれかを定義します.デフォルトは「start」です.

inline:オプションで、水平方向の位置合わせ、「start」、「center」、「end」、または「nearest」のいずれかを定義します.デフォルトは「nearest」です.

次の例:指定したラベルの場所にページをジャンプします.
HTML:

1
2
3
4
5


    Top

CSS:

*{
    margin: 0;
    padding: 0;
}
div{
    height: 400px;
    font-size: 100px;
    color: #fff;
    text-align: center;
}
.d1{  background: #e84d25; }
.d2{  background: #1970a8; }
.d3{  background: #cd23b6; }
.d4{  background: #6dd5d9; }
.d5{  background: #b1f138; }
.backtop{
    position: fixed;
    right:20px;
    bottom:30px;
    z-index: 100;
    background: #f30;
    border:2px #fff solid;
    height: 50px;
    width: 50px;
}
.backtop a{
    display: block;
    width: 50px;
    height: 50px;
    font-size: 14px;
}

JavaScript:

let backtop = document.getElementById("backtop");
let d3 = document.getElementById("d3");

backtop.addEventListener("click",function(){
    //    backtop，    d3    
    d3.scrollIntoView({
       behavior:"smooth",
       block: "start"     //    end   
   });
});

片付ける.