Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <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>
- body, html, .main {
- height: 100%;
- }
- section {
- min-height: 100%;
- }
- </style>
- </head>
- <body>
- <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
- <div class="main">
- <section></section>
- </div>
- <div class="main" id="section2">
- <section style="background-color:blue"></section>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment