Comment faire défiler en douceur en utilisant location.hash?

Question

J'essaie de mettre un défilement lisse dans location.hash, mais il semble que cela ne fonctionne pas.

Comment résoudre ce problème?

JS

function test_function(){ 
    window.location.hash = '#divid'; 
    jQuery(document).ready(function($){ 
     $('html, body').animate({ scrollTop: $(test_function).target.offset().top }, 1000); 
    }); 
} 

HTML

<div> 
<a href="<?php echo $_POST['referrer'] ?>#divid">Find a store</a> 
</div> 

Answer 1

Je me sens, il y avait une erreur console avec votre code ci-dessus scrollTop, parce que $(test_function).target. viendrait non définie. Vous devez cibler le bon element pour naviguer vers elle en douceur. Vous trouverez ci-dessous l'exemple de fragment sur lequel vous pouvez travailler.

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

#divid { 
 
    position: absolute; 
 
    top: 800px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a onclick="test_function(this)" href="#">Find a store</a> 
 
<div id="divid"></div>

Answer 2

réponse simple je suis trouver here, ici, vous pouvez également utiliser la balise d'ancrage multiple et différent div id.

<a href="<?php echo $_POST['referrer'] ?>#divid">Find a store</a> 

<script type="text/javascript"> 
    $(function() { 
     $("a[href*='#']:not([href='#'])").click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html,body').animate({ 
      scrollTop: target.offset().top 
      }, 2000); 
      return false; 
     } 
     } 
    }); 
    }); 
</script> 

<div id="divid">Scroll Section</div>