Je le balisage suivantdéfilement lisse HTML signet
<!DOCTYPE html>
<html>
<head>
<title>Blah</title>
</head>
<body>
<header id='navigation'>
<nav>
<a rel='bookmark' href='#introduction'>Home</a>
</nav>
</header>
<section id='content'>
<section id='introduction'>
<header>
<h1>Welcome</h1>
<a href='#navigation'>Back to top></a>
</header>
</section>
</section>
</body>
</html>
Vous pouvez cliquer sur Home et accéder à la section introduction avec un signet. Vous pouvez ensuite revenir au navigation en cliquant sur Back to top.
Cela fonctionnera dans tous les navigateurs. Ce que je veux faire est d'ajouter un écouteur javascript d'une façon ou d'une autre de sorte que si Javascript est activé sur le navigateur, il écoute les signets et défile en douceur vers le signet. En pensant à haute voix, je pourrais ajouter un écouteur onchange à la barre d'adresse, analyser l'emplacement et vérifier quoi que ce soit après un #. Je pourrais obtenir l'élément id du texte après ce caractère et implémenter un algorithme de défilement lisse? Je ne pense pas que cela annulerait le défilement UA.
Je pourrais aussi analyser les DOM pour les liens qui contiennent # liens et ajouter javascript onclick smoothScoll(bookmark_name) événements et de supprimer le signet de sorte que le lien sera juste '#' alors dans le smoothScroll faire le défilement et l'ajouter à la barre d'adresse après le # .
Je voudrais apprendre à le faire avec javascript et non jQuery.
N'importe qui a eu des idées pour le faire. Je veux laisser le HTML tel quel et ajouter des événements javascript dans mon initPage() ce qui signifie que je sais javascript est activé.
Merci
Matt
Ceci est simple si vous utilisez jQuery.Avez-vous besoin d'une réponse non-jQuery? –
Je préfèrerais juste comprendre comment manipuler le DOM de cette façon car je voudrais utiliser l'API HTML5 History et me permettre une personnalisation plus serrée de mon code JS pour le site que je suis en train de faire. Je vais comprendre ce week-end. –