Since JavaScript runs in the same thread as the UI, a scroll event callback can block the UI-thread and thus cause lag. You need to throttle the scroll event listener because some browsers fire a lot of them. Especially if you’re on OS X with an analog scroll device. Since you do a lot of … Read more
use getBoundingClientRect if $el is the actual DOM object: var top = $el.getBoundingClientRect().top; JSFiddle Fiddle will show that this will get the same value that jquery’s offset top will give you Edit: as mentioned in comments this does not account for scrolled content, below is the code that jQuery uses https://github.com/jquery/jquery/blob/master/src/offset.js (5/13/2015) offset: function( options … Read more
For some reason, removing ‘height: 100%’ from my html and body tags fixed this issue.
It’s Chrome’s own incorrect behavior that is deprecated, and they’re warning authors to stop relying on it. The scrolling viewport is represented by document.documentElement (<html>) in standards mode or <body> in quirks mode. (Quirks mode emulates the document rendering of Navigator 4 and Explorer 5.) Chrome uses body.scrollTop to represent the viewport’s scroll position in … Read more
There are some solutions, make sure to check them all 🙂 Option1: The router outlet will emit the activate event any time a new component is being instantiated, so we could use (activate) to scroll (for example) to the top: app.component.html <router-outlet (activate)=”onActivate($event)”></router-outlet> app.component.ts onActivate(event) { // window.scroll(0,0); window.scroll({ top: 0, left: 0, behavior: ‘smooth’ … Read more
They are both going to have the same effect. However, as pointed out in the comments: $(window).scrollTop() is supported by more web browsers than $(‘html’).scrollTop().
Try this fiddle, it is working in chrome, ie and the latest version of mozilla : http://jsfiddle.net/Hed2J/3/ I replace $(‘body’).scrollTop() with $(window).scrollTop().
To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished. For example: var body = $(“html, body”); body.stop().animate({scrollTop:0}, 500, ‘swing’, function() { alert(“Finished animating”); }); Where that alert code is, you can execute more javascript to add in further animation. Also, the ‘swing’ … Read more
Firefox places the overflow at the html level, unless specifically styled to behave differently. To get it to work in Firefox, use $(‘body,html’).animate( … ); Working example The CSS solution would be to set the following styles: html { overflow: hidden; height: 100%; } body { overflow: auto; height: 100%; } I would assume that … Read more