Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <style> #textDiv { height: 1500px; } p { margin-top: 100px; height: 500px; } </style> </head> <body> <div id='linkDiv'> <a href="#link1" class="scrollLink">Scroll to link1</a> <a href="#link2" class="scrollLink">Scroll to link2</a> </div> <div id="textDiv"> <p id="link1"><strong>Anchor 1</strong> - Lorem ipsum dolor sit amet, nonumes voluptatum mel ea.</p> <p id="link2"><strong>Anchor 2</strong> - Ex ignota epicurei quo, his ex doctus delenit fabellas.</p> </div> <script> let $root = $('html, body'); $(document).ready(function() { $(a.scrollLink).click(function() { $root.animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500); return false; }); }); </script> </body> </html>