0

I am trying to create a jquery smooth scroll transition using a css styling effect. I want to accomplish by adding "scroll behavior: smooth" through jquery to the main html tag, and removing the scroll effect smooth right after so that the html tag does not keep the scroll effect and affect other parts of the site. I tried this by writing the following code:

    $("html").css("scroll-behavior", "smooth");
    var scrollEffect = $("h2#clickScroll");
    scrollEffect.scrollIntoView();
    $("html").delay( 1800 ).css('scroll-behavior', "");

this does not work; it just causes it so that there is no scroll effect at all, so then I tried this approach:

    $("html").css("scroll-behavior", "smooth");
    var scrollEffect = $("h2#clickScroll");
    scrollEffect.scrollIntoView();
    $("html").delay( 1800 ).queue(css('scroll-behavior', ""));

The second approach adds the effect, but the html tag keeps the "scroll effect: smooth" and does not remove it. Any suggestions on how to approach this?

Joao
  • 67
  • 8
  • 2
    https://stackoverflow.com/questions/5396119/using-jquery-delay-with-css – epascarello Feb 15 '21 at 18:32
  • Also, scroll into view has a behaviour "smooth" you can try and see if that works for you. Then you don't need to do the toggling. Take a look at the [docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#example). – Mellet Feb 15 '21 at 18:34
  • @epascarello Thank you. That reference was perfect. You can comment with anything and I will give this question to you. – Joao Feb 15 '21 at 18:41

0 Answers0