smooth scroll

//add smooth scrolling when clicking any anchor link
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
//<a href="#someOtherElementID"> Go to Other Element Smoothly </a>

View another examples Add Own solution

Dylan Knowles 110 points

                                    /* ==========================================================================
   Smooth scroll
   ========================================================================== */
$('a[href*=#]:not([href=#])').on('click', function() {
    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') &amp;&amp; location.hostname === this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({

                scrollTop: (target.offset().top - 40)
            }, 1000);
            return false;
        }
    }
});

Thank you! 7

3.67

HeDinges 100 points

                                    html {
  scroll-behavior: smooth;
}

/* No support in IE, or Safari
You can use this JS polyfill for those */
http://iamdustan.com/smoothscroll/

Thank you! 6

3.67 (6 Votes)

Oliver Mason 95 points

                                    $('#element').foundation('_destroy');

Thank you! 8

4 (8 Votes)

3.67

Estella 100 points

                                    window.scrollTo({ top: 900, behavior: 'smooth' })

Thank you! 6

3.67 (6 Votes)

PotatoLatte 110 points

                                    // Select all links with hashes
$('a[href*=&quot;#&quot;]')
  // Remove links that don't actually link to anything
  .not('[href=&quot;#&quot;]')
  .not('[href=&quot;#0&quot;]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      &amp;&amp; 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(&quot;:focus&quot;)) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

Thank you! 0

Are there any code examples left?

Find Add Code snippet

New code examples in category Other

Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
Other 2022-03-27 22:45:24 income of a web developer
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
Other 2022-03-27 22:30:45 rick roll embed code
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
Other 2022-03-27 22:20:05 iterative power
Other 2022-03-27 22:15:11 flutter run all
Other 2022-03-27 22:10:05 when is karlson release
Other 2022-03-27 22:10:02 wp .htaccess example
Other 2022-03-27 22:00:08 bash pause in file read line by line

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

smooth scroll

Welcome Back!

Create a Free Account