CODEWITHSUNDEEP
javascriptjquerysmooth-scrolling
Gold Skull with Pattern
Gold Skull with Pattern

Reputation: 421

Stop the smooth scroll with mouse wheel

I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly. However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.

Here's the code Please advice

        <script>
        $('a').click(function(e){

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

            return false;
        });
        </script>

Upvotes: 1

Views: 1829

Answers (3)

madushak
madushak

Reputation: 250

Try this

<script>
    $('html, body').bind('mousewheel', function(e){ 
        $(this).stop();
    });

    $('a').click(function(e){
          $('html, body').stop().animate({
                scrollTop: $( $(this).attr('href') ).offset().top
          }, 1500);

        return false;
    });
</script>

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Maybe the issue is that you are not using document ready function.

Try this: 

<script>
  $(document).ready(function () { // <-- this 
    $('a').click(function(e){

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

        return false;
    });
  });
</script>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()

Upvotes: 1

Related Questions