question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature: Animating scrollTop on scrollable elements

See original GitHub issue

Thanks for your work on this library - looks promising! I’ve been testing it out and ran into a small issue. We have scrollable elements in our app (overflow-y:scroll) and have used jQuery’s animate like so:

$('.pickup-locations').stop().animate({
  scrollTop: this.topPosition - 15
}, 1000);

When I tried dropping in .velocity using the new syntax, it didn’t seem to work:

$('.pickup-locations')
  .velocity('stop')
  .velocity({ scrollTop: this.topPosition - 15 },{ duration: 1000 });

I also tried this, but it only seems to scroll the window to the element’s position, not the element itself:

$('.pickup-locations')
  .velocity('stop')
  .velocity('scroll', { duration: 1000, offset: this.topPosition });

Any thoughts on how to achieve animated scrolling inside a scrollable element? Thanks!

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
chiplaycommented, May 2, 2014

As a quick follow-up question - is this the correct way to scroll the full browser window using velocity?

$('html')
   .velocity('stop')
   .velocity('scroll', { duration: 750, offset: top - 100 });
0reactions
julianshapirocommented, May 3, 2014

Beautiful. This is why I spend time on Velocity. Because I love it when people show me what they make with it 😃

When it’s converted to Velocity, tweet to me and I can link to relay and your own portfolio in the upcoming Velocity gallery.

Sent from my phone.

On May 2, 2014, at 7:49 PM, Chip Lay notifications@github.com wrote:

@julianshapiro incredible! Works great - thanks for making this happen. Excited to start pushing our animations to new levels. (our mobile web app https://m.relayfoods.com - currently uses Zepto for animations, will be using Velocity soon)

— Reply to this email directly or view it on GitHub.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scroll to an element with jQuery - javascript - Stack Overflow
When the user clicks on the <input id="#subject"> , the page should scroll to the page's last element, and it should do so...
Read more >
How to animate scrollTop using jQuery ? - GeeksforGeeks
This method is used with the scrollTop property to animate the scrolling on the page. The jQuery selector is used to select both...
Read more >
Element.scrollTop - Web APIs | MDN
The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.
Read more >
13959 (scrollTop animation on root scrollable element) – jQuery
Second of all, html and body do not both need to be scrollable. Only one of the animations needs to work (​http://codepen.io/timmywil/pen/LIqar). Last,...
Read more >
How to Animate on Scroll With Vanilla JavaScript - Web Design
In this tutorial you'll learn how to implement animation on scroll using vanilla JavaScript and CSS.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found