使用javascript滚动到元素时添加平滑效果

Question

I have coded the following function that whenever a certain button is clicked, view is scrolled to a specific element that matches the 'href' attribute.

I would like to add a smooth effect to the scrolling. Right now it simply goes to the element.

<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer>
    $(function() {

        $(".button").on("click", function( e ) {

            e.preventDefault();

            $("body, html").animate({ 
                scrollTop: $( $(this).attr('href') ).offset().top 
            }, 600);

        });

    });
</script>

Any help is appreciated. Thanks.

Answer 1

Your code is perfect just edit your code like this (see below).

You have written in on script tag which is loading external script file as well as inline script.

<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer> </script>
<script>
  $(function() { 
    $(".button").on("click", function( e ) { 
      e.preventDefault(); 
      $("body, html").animate({ scrollTop: $( $(this).attr('href') ).offset().top}, 600); 
    }); 
  });
</script>