0

I'm converting this jQuery code:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 1000);
});

It's very popular, and I'm sure everyone understand what it does, when clicking an anchor link with an id it smooth scrolls to it. I have used this code for many projects but I am no longer using jQuery, as it is being deprecated. Converting this to vanilla JavaScript has proven a challenge. This is what I have so far, that works:

document.addEventListener('click', function(event) {
  if (event.target.matches('a[href^="#"')) {
    event.preventDefault();

    console.log('works fine')

  }
}, false);

I am having trouble finding resources to convert .animate() and the line with scrollTop. It's a pretty tall order for someone with only beginner/intermediate JS experience. I was wondering if anyone knew how to convert this code to JavaScript, or where I could find resources about converting this. A popular solution to smooth scrolling I have found is the following code:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Using scroll-behavior: smooth, but I do not wish to use this as it is unsupported by many browsers (to my knowledge), and it does not let me customize how long it takes to smooth scroll.

Any help would be much appreciated.

RossEcuador
  • 39
  • 3
  • "Not many browsers" is Safari and IE11 and lower https://caniuse.com/?search=scroll-behavior – mplungjan Jul 31 '21 at 19:47
  • @mplungjan can I somehow modify how long it will take to smooth scroll though? – RossEcuador Jul 31 '21 at 19:50
  • https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior _The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any._ – mplungjan Jul 31 '21 at 19:52
  • @mplungjan but no Safari support? The second biggest browser after chrome? it says so caniuse – RossEcuador Jul 31 '21 at 19:59
  • 14% share for a smooth scroll. You can find [hundreds of animations](https://www.google.com/search?q=vanilla+smooth+scroll+site:stackoverflow.com) on the net that are not jQuery – mplungjan Jul 31 '21 at 20:10
  • 1
    For example https://stackoverflow.com/questions/17733076/smooth-scroll-anchor-links-without-jquery – mplungjan Jul 31 '21 at 20:12

1 Answers1

0

Looking through the jQuery code, it uses another library (Tweening) to create the smooth scrolling effect. It wouldn't be worthwhile trying to create it in vanilla JS.

While a lot of browsers might not support scroll-behaviour, pretty much all major browsers do. A lot of older browsers are now being discontinued (especially IE).

Your best option is to continue using the code you provided yourself (or just continue using jQuery):

document.querySelector(this.getAttribute('href')).scrollIntoView({
   behavior: 'smooth'
});
TigerMANEK426
  • 11
  • 1