divをクリックすると最も高い視点に移動します

Question

何百ものdiv要素を持つWebページ上で、誰かをクリックしてウィンドウをスクロール（上下）してdivが上部に表示されるようにする必要がありますビューポート。

つまり、要素がクリックされたときにウィンドウをスクロールして、この要素がビューポートの上に表示されるようにする方法はありますか？

Can Element.scrollIntoView（）はこれをどのように行いますか？

Answer 1

これは、あなたが（参照ボタンをクリックして）何をしたいです：

$("button").click(function(){ 
 
    $(this).addClass("sivola"); 
 
});

.sivola { 
 
    position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr> 
 
<button>130 Martin Garrix si volaaa</button>

Answer 2

あなたdivにクラス名を割り当てます。

ワン（標準の動作）標準のCSSプロパティが含まれていますし、他の（ビューポートの上にあなたのdivを再配置するために使用するもの）

className { 
    position: fixed; 
    top: 0; 
    left: 0; 
    ... 
} 

のようなものは、ただ、このクラス名を割り当てる必要がありますfixedの位置をトリガーしたい場合は、あなたのdivに転送してください。

Answer 3

ドキュメントの上部を0pxに設定し、アニメーション化する必要があります。

$('scrollToTopBtn').click(function(e){ 
     $('html, body').animate({'scrollTop':'0'}); 
     e.preventDefault(); 
    }); 

Answer 4

解決策を見つけました！これを実現するには、以下のJSを使用してください。 注「theOffset.top - 1」というビューポートの上部と「100」に対する相対位置であるMS

jQuery(document).ready(function($) { 
$(".elementclass").click(function(){ 
      var self = this; 
      setTimeout(function() { 
       theOffset = $(self).offset(); 
       $('body,html').animate({ scrollTop: theOffset.top - 1 }); 
      }, 100); 
     }); 
    });