✅ JS: Smooth scroll

Gepost op 6 mei 1998

Scroll naar een deel van een pagina!

Zie voorbeeld

Deel 1

Klik op de link om naar 'Deel 2' te scrollen.

Naar deel 2 (klik hier)

Ga naar het script (klik hier)

Deel 2

Klik op de link om naar 'Deel 1' te scrollen.

Naar deel 1 (klik hier)

Ga naar het script (klik hier)

Kopie script

Select & Copy Chrome Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> <style> #section1 { height: 700px; background-color: #ffffffdd; } #section2 { height: 700px; background-color: #55555577; } </style> </head> <body> <h1>Smooth Scroll</h1> <div class="main" id="section1"> <h2>Deel 1</h2> <p>Klik op de link om naar 'Deel 2' te scrollen.</p> <a href="#section2">Naar deel 2 (klik hier)</a> </div> <div class="main" id="section2"> <h2>Deel 2</h2> <p>Klik op de link om naar 'Deel 1' te scrollen.</p> <a href="#section1">Naar deel 1 (klik hier)</a> </div>

Ga terug omhoog

Tags: HTML JS Script Javascript

🔙 Terug

✅

Nieuwe website

Partner

Account

Account maken!
Wachtwoord vergeten?
Wat is mijn gebruikersnaam?

Bezoekers: 8

✅