Je défile lentement vers un div ou une ancre spécifique dans une page html

Question

J'ai une page html et je veux la faire défiler lentement vers un point spécifique ou tout autour de la page. J'ai essayé les codes suivants, mais rien n'a fonctionné:

<a href="#anchorName"></a> 

<script> 

function scrollTo(hash) 
{ 
    location.hash = "#anchorName"; 
} 

</script> 

En second lieu, j'ai essayé de défilement à un div mais dans ce cas, je devais aussi utiliser CSS et de mettre une hauteur. J'essaie d'éviter cela.

Comme on le voit sur les anciens numéros stackoverflow:

<a href="#myDiv" id="button">button</a> 

<script> 

    $("#button").click(function() 
    { 
     $('html, body').animate({ 
      scrollTop: $("#myDiv").offset().top 
     }, 2000); 
    }); 

</script> 

et il ne fonctionne pas du tout.

Answer 1

Essayez comme ceci:

$(document).ready(function(){ 
 
    $("#button").click(function(e) { 
 
    e.preventDefault(); 
 
    $('html, body').animate({ 
 
     scrollTop: $($.attr(this, 'href')).offset().top 
 
    }, 2000); 
 
    }); 
 
});

#myDiv { 
 
    margin-top: 800px; 
 
    height: 50px; 
 
    width: 300px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#myDiv" id="button">button</a> 
 
<div id="myDiv"></div>

Answer 2

Puisque vous configurez #myDiv comme href pour le bouton, vous devez preventDefault() avant de déclencher l'animation:

$("#button").click(function(e){ 
 
    e.preventDefault(); 
 
    $('html, body').animate({ 
 
     scrollTop: $("#myDiv").offset().top 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="myDiv" id="button">button</a> 
 
<div style="height:400px;"></div> 
 
<div id="myDiv">Lorem Ipsum</div>