javascript - Faire défiler vers un élément avec jQuery

Mots clés : javascriptjqueryscrolljavascript

meilleur 4 Réponses javascript - Faire défiler vers un élément avec jQuery

vote vote

97

$("#button").click(function() {     $([document.documentElement, document.body]).animate({         scrollTop: $("#elementtoScrollToID").offset().top     }, 2000); }); 
<html>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>     <script>         $(document).ready(function (){             $("#click").click(function (){                 $('html, body').animate({                     scrollTop: $("#div1").offset().top                 }, 2000);             });         });     </script>     <div id="div1" style="height: 1000px; width 100px">         Test     </div>     <br/>     <div id="div2" style="height: 1000px; width 100px">         Test 2     </div>     <button id="click">Click me</button> </html>
vote vote

85

$('body').scrollTo('#target'); // Scroll screen to target element  $('body').scrollTo(500); // Scroll screen 500 pixels down  $('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down 
vote vote

77

document.getElementById("element-id").scrollIntoView(); 
vote vote

65

if($(window.location.hash).length > 0){         $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000); } 

Questions similaires