Something is scrolling back to 0,0 after document loaded - javascript

I have this JS to scroll to a specific place on pageload (which, for Rails with Turbolinks, is on Turbolinks load):
document.addEventListener("turbolinks:load", function() {
window.scrollTo(240,1);
});
But when I load a page, it loads at 240,1 for a split second, and then jerks back to 0,0.
Does anyone have an idea what is causing this delayed scroll to 0,0?
I have also tried replacing "turbolinks:load" with "page:load" and "ready", they don't work either.
Things that might be relevant:
Chrome desktop
Ruby on Rails 5.2.3
Turbolinks 5
No other custom JS

Try history.scrollRestoration = 'manual';. It should prevent the page from scrolling back to a previous position.

Add this script to dev tools console
window.onscroll = function (e) {
console.log("Window scrolled");
}
Now add a breakpoint and check the call stack as shown in the image below.
This will show you all of the functions that are changing the window scroll.
Note that, if you scroll the page yourself, this function would be executed even then as well.
Hope it helps!!

Related

Disable browser 'paint' until *something* is loaded

I hope this is a question I can ask here ; I know there are rules.
This site https://mylisting.27collective.net/my-city/ (a demo site for a wordpress theme) has a spinner which is visible during page changes.
It seems to me that the browser is restricted from clearing the screen, or beginning to paint the new screen, until some event occurs. The result is that the spinner works beautifully and even on a slow connection the user never sees so much as a flicker between pages.
Can anyone shed any light on how this is achieved?
Many thanks in advance,
This is actually pretty simple. There's a div (main-loader) that sits over the top of the site (the spinner), when the DOM ready event fires, the loader div fades out....
Looking at the code of that page it's simply the below...
jQuery(document).ready(function(e) {
e(".main-loader").fadeOut(750), // <-- This is the loader div
// .....
}

Javascript - changes are made after resizing window browser

I have got infinity scroll plugin on my website. After reaching the bottom I get new products which are as intended. The issue is that some content like "add-to-cart" or "product-price" are not displaying as it should be. For example, there is margins and padding set via js.
I thought that maybe if I bind this js with body element this may work, but I cannot find js that make those changes.(its Magento website)
This is only happening in products that were loaded through infinity plugin. After resizing window everything gets fine.
Why is this happening? Any help is appreciated
search for something like
".addEventListener('resize'"
".resize("
".on( "resize"
in firebug's script tab, you may find the eventlistener method and see what happens when it gets fixed when you resize the page.
generally you will have to provide some more information.anything else is guessing

JavaScript: Is there an event like "restoring scroll position after refresh"? Is there any way to use/create it?

When you scroll a webpage, and refresh it, the scroll will jump to the place it was before the refresh. I have some scroll-related JavaScript, which modifies the visual state of the webpage on the "scroll" event, but it doesn't register the "scroll position restoring" after refresh. Currently I worked around it by simply setting setTimeout, waiting a while, and then reading the scroll position and running my code, but it isn't right. Is there any better way to do this?
If you need to scroll after refresh its strange behave because when you refresh all website loading from scratch.
What can be done maybe to save it on localStorage the position and after the page loaded do scroll:
window.onbeforeunload = function() {
localStorage.setItem('position',window.pageYOffset);
}
$(window).on('load', function(){
window.scrollTo(0,localStorage.getItem('position')||0);
});

Chrome/Safari - window.scroll on page load

I am working on a project where my client is asking to load the page on the top. Here is the requirment
Whenever you refresh the page, no matter where you are in browsing, the page must refresh at the top of the page.
To get this, I used two functions window.scroll(0,0) and scrollTop(0) at document load.
jQuery(document).ready(function(e){
window.scroll(0,0);
});
And
jQuery(document).ready(function(e){
jQuery("body,html,document").scrollTop(0);
});
I get the desired results in browsers using any of the above two codes except in Chrome/Safari.
This is what I am experiencing in Chrome/Safari. Let's say that I am at the bottom of a page, then if I refresh it, then I get the events in the following sequence.
Page loads at the point where I was at the time of refresh. (Bottom - Page loading).
Then the functions mentioned above work and get me to the top of the page. (Still loading).
At last, when the page fully loads, it takes me back to where I was at the time of refreshing the page i.e. at the bottom.
You can check it at this page.
I have also tried to put a timeout function as.
jQuery(document).ready(function(e){
setTimeout(function() {window.scrollTo(0, 0);},500)
});
Now, this works one some pages but not on all. So I am looking for a better way than mine.
Thank you.
You should use something like this:
$(document).ready(function(){
$(this).scrollTop(0);
});
Edit: Chrome/safari:
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});

Prevent Web Pages From Maintaining Page Scroll Position On Reload

How can I prevent Web Pages From Maintaining Page Scroll Position On Reload
Call window.scrollTo(xpos,ypos) javascript function on page load. More can be found here
Call this function when the page is fully loaded. You can use jQuery to make sure the function is called once page is completely loaded.
$(document).ready(function() {
window.scrollTo(0,0);
});
Working example can be found here

Categories

Resources