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);
});
Related
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!!
I have page 1 and page 2, A button in page 1 takes a user to page 2. I want a javascript to wait till page 2 has fully loaded before displaying it when the user clicked the button in page one, In between I need to put loading gif, so that visitor will know that something is loading.
How can I achieve that using pure javascript?
No jQuery please.
EDIT:
The javascript has to be pasted in page one, so that the button would be the trigger, do note that we can't load page 2 in div as some might suggest to load page two in div, then read if page two is fully loaded then display div.
window.onload
might be what you’re looking for
document.addEventListener("DOMContentLoaded", function(event) {
//Your code
});
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.
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
At the bottom of my page I have window.location = ...
I wish my page (let's call it jspage) to load, and then only once everything is fully loaded do the redirect. At the moment I get "stuck" on the referring page while jspage is processing, then jspage flashes up for a tiny instant and I am redirected
You can put your redirect to OnLoad handler of body, or use jQuery $(document).ready() to put your code in, or add timout and stay for some time on your jspage for better control of time when redirect happens.
But I'd start figuring out why you are "stuck" on referring page. It very well could be caused by slow server side processing of jspage rather than browser rendering (use Fiddler or Net tab of FireBug in Firefox to see when page actually comes back from server).
I would go with onload event of the window, and in there put small timer e.g. two seconds to ensure user will see the splash screen. Code for this would be simply:
<script type="text/javascript">
window.onload = function() {
window.setTimeout(function() {
document.location.href = "otherpage.html";
}, 2000);
}
</script>