L'URL ne se met pas à jour dans la barre d'adresse après avoir cliqué sur le lien d'ancrage
Robby
J'utilise un petit jQuery pour un défilement fluide vers les liens ancrés. Cela fonctionne bien, mais cliquer sur les liens ne met pas à jour l'URL dans la barre d'adresse. Je souhaite que l'URL se mette à jour pour inclure le nouveau hachage du lien cliqué.
J'ai trouvé des questions similaires ici, mais leur code d'origine était suffisamment différent du mien pour que je ne puisse pas comprendre comment l'implémenter dans le mien.
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
return false;
});<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
p {
margin-bottom: 200px;
}
</style>
</head>
<a href="#anchor1">Link to Anchor 1</a>
<a href="#anchor2">Link to Anchor 2</a>
<a href="#anchor3">Link to Anchor 3</a>
<a href="#anchor4">Link to Anchor 4</a>
<a name="anchor1"></a>
<p>Anchor 1</p>
<a name="anchor2"></a>
<p>Anchor 2</p>
<a name="anchor3"></a>
<p>Anchor 3</p>
<a name="anchor4"></a>
<p>Anchor 4</p>
</body>
</html> Saša Tomislav Mataić
Comme vous l'avez return falsedans votre gestionnaire de clics, le comportement par défaut du lien est remplacé. C'est pourquoi la barre d'adresse ne met pas à jour l'URL.
Vous pouvez modifier manuellement la partie hachée de l'URL:
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 800);
// update the URL in location bar
window.location.hash = $.attr(this, 'href').substr(1);
return false;
});