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
Related
I create a dashboard to which I added a modal box which proposes to save or to go back. To go back, I need to reload the page (so that the data will return to the initial state). I used javascript and this script works but the problem is that the browser shows that the page is reloaded (I would like to reload the page dynamically). Do you have an idea to reload the page dynamically?
current code:
function cancel() {
close();
document.location.reload();
}
To my knowledge there is no way to do this automatically. You will have to fetch all your values asynchronous and repopulate your Html.
Or perhaps put your entire dashboard inside an iframe and call document.location.reload(); inside that.
That should stop the browser showing the reload animation. I have not tried it though.
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!!
Suppose i have 4 html pages say a.html,b.html,c.html and d.html.
Initially when i run the program i load a.html, when the user scrolls to the top and if it is already the top the alert says "you have reached the top of the page and this is the first page".
Now when i scroll dowm, using the js way of detecting page end, when i reach page bottom i call the next page and load the next page that is b.html.
In this way when it reaches d.html and you scroll down to the end of the page its will alert you that "you have reached the page end and this is the last page".
Same method is used when i scroll up and when it reached the page top, js will call the previous page function and it will load the previous page.
in here i will load the previous page bottom first. this is also working fine(but there is no continuity)
This strategy is working fine. But i need a mechanism to load these html pages continuously so that it will load the webpages in a neat fashion as if i open a pdf doc in a doc viewer.
Like the next and previous page swaps are smooth rather that opening it as a new page(this is very important in the case of previous page calls).
Is there any library in jquery or java script for this functionality?
someone please help. I searched a lot for this functionality
If you want to load HTML documents onto a webpage, you can use jQuery's .load() function.
Syntax:
// $ is the same as jQuery
$(element).load(documentURL);
Here, .load() gets the HTML from the document and puts this HTML into the element specified. To get specific elements in an HTML document, just locate them as you do in CSS. If you wanted to get the header from the document:
$("#result").load("myDocument.html header");
Remember: If you are loading the HTML on the DOM page load, use $(document).ready();. Here's an example:
$(document).ready(function() {
$("#result").load("myDoc.html body main");
});
I want to reload my site (only once) before loading any of the content. I implemented this option but the user is still able to see the content of the page before going for reload.
Here is my code
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
How can I implement this functionality without showing any of the content to the site visitor.
You mean you don't want your user to see any of the content on the page before you trigger the reload?
If you mean 'see', like visually see the content, you could always put a div that blocks the entire viewport, and then remove it once the page has been reloaded.
But to me, this seems like an issue that could be resolved by not adding anything to the document body until your conditions have been met. You should design your code in such a way that a refresh is not needed, as that is creating unnecessary requests.
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);
});