let user scrolling stop jquery animation of scrolltop?

by

Diode’s solution didn’t work for me – scroll() didn’t differentiate between the animation and the user, meaning the animation stopped immediately. From a different post, the following works for me (modified for this purpose):

// Assign the HTML, Body as a variable...
var $viewport = $('html, body');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});

More Related Contents:

  1. What is the purpose of backbone.js?
  2. jQuery parent of a parent
  3. Twitter-style autocomplete in textarea
  4. Targeting $(this) within nested for each loops in jQuery
  5. How to get on-screen visible element objects in jQuery? [duplicate]
  6. How to extract number from a string in javascript
  7. Determining if a HTML element has been added to the DOM dynamically
  8. Set React Input Field Value from JavaScript or JQuery
  9. Scroll to a specific position on a page using Javascript / Jquery [duplicate]
  10. jQuery addClass onClick
  11. jQuery $.ajax(), pass success data into separate function
  12. Why does the jQuery JSON parser need double escaping for backslashes?
  13. jQuery uses (new Function(“return ” + data))(); instead of eval(data); to parse JSON, why?
  14. Is My Page Being Loaded from the Browser Cache?
  15. Dealing with overlapping jQuery sortable lists
  16. Is there any way to check reachability test of server in jQuery
  17. How to get html source code from external url
  18. In jQuery, is there any way to only bind a click once?
  19. Queue AJAX calls
  20. What is the difference between $(document).ready(function() and $(function() ?
  21. canvas- Cropping images in different shapes
  22. jQuery InnerText not including sub element
  23. Generate XML document in-memory with JavaScript
  24. Ordered JSONObject
  25. How to post ASP.NET MVC Ajax form using JavaScript rather than submit button
  26. Replacing selected text in the textarea
  27. parse xml response with jQuery
  28. Looping through Markers with Google Maps API v3 Problem
  29. Grouping JSON by values
  30. Renaming object keys recursively

Leave a Comment