We Keep Coding

Scroll down to specific position after page refresh issue

I have the following code which works exactly as I need for refreshing a page using a submit button.
However I have added code in it to make it scroll down to a specific location after updating, the problem is, it scrolls down to the location, then springs back to the top of the page
any ideas why anybody please?
$(".visitpage").on('click', function() {
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('html, body').animate({
scrollTop: $("#search-results").offset().top
}, 2000);
});
function removeLoader() {
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
}

You will surely need the scrollTo method of the window object in javascript. Then I would figure out how far down your element is by getting a reference for that object in pixels on the page. See Retrieve the position (X,Y) of an HTML element for how to do that, since part of your answer would be a duplicate question I will let you read it. And this article is helpful http://javascript.info/coordinates
window.scrollTo(500, 0);
https://www.w3schools.com/jsref/met_win_scrollto.asp

Maybe I'm wrong here; but if you created a div where you want the page to scroll, or if you have on there make sure it's named, then right after the refresh command add
window.location.href = "#YOURDIVTAGHERE"; so
So if this is the part of the page you want it to go down to:
<div id="search-results">
CONTENT
</div>
so then your JS code, maybe try:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".visitpage").on('click', function(){
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
window.location.href = "#search-results";
}

How to exclude JQuery/Javascript fade in & out function on certain links?

I'm using this fade in and out JQuery/Javascript effect on my site to have each page fade in and out when a link is clicked. It's working great when the link that is clicked leads to a different page, but it is causing problems when the link leads to a different part of the page (such as my back to top link), when a mailto link is clicked, and when a link that is suppose to open up in a new page or tab is clicked. When these type of links are clicked they just lead to a blank white page because they don't lead to a new page. Here is the script:
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
Because of this I'm trying to figure out if there is a way where I can exclude this fade in/out function from certain links (such as the back to top link), but I don't know how to do it. I know that rather than set all the links to fade in/out I can set the fade in/out effect to a specific class that way it doesn't effect every link. However because the site is rather large, it would be extremely tedious and difficult to add that class to every link. So rather than do that I'm wondering if theres a way to define a no-fade class that would exclude this fade in/out function? That way I could apply that class to these few links that are having problems and make those links behave normally.
It seems like a simple thing to do, but because I'm still not very fluent in javascript/jquery I don't know how to do it. Any help would be much appreciated!
*EDIT: Here is the solution incase anybody else has a similar issue. Thanks to David for the missing piece!
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link EXCEPT .no-fade class
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});

Yup, you could indeed define a class that when applied to an anchor would exclude it from performaing your fade out and redirect.
So if you had an anchor you wanted your default fade-out behaviour to apply to then simply leave it as is.If you didn't want this behaviour then you could apply a class (we'll call it *no-fade") to the anchor.
HTML
Another page
Back to top
jQuery
<script type="text/javascript>
$(document).ready(function() {
$("body").fadeIn(1500);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
The only thing I've edited from your code is the selection of the anchors which I changed from:
$("a")
to
$("a").not(".no-fade")

The unobtrusive way would be to look for the hash symbol (#) or mailto:, etc. to prevent those types of links from fading out:
working fiddle
$("a").click(function (event) {
event.preventDefault();
linkLocation = $(this).attr('href');
if(linkLocation.indexOf('#') != -1 || linkLocation.indexOf('mailto:') != -1)
{redirectPage();}
else if($(this).attr('target') && $(this).attr('target').indexOf('_') != -1) window.open(linkLocation);
else $("body").fadeOut(1000, redirectPage);
});
Also, linkLocation = this.href should be linkLocation = $(this).attr('href')

This Ajax javascript code not working right

So I have been busy building a site for a customer. Now I need to do some ajax on menu clicks. The code below is successful in showing the loading.gif and not 100% sure it does the ajax as the dang page still loads up regular style with the gif spinning. Works but doesn't..
Anyways heres a link to it: and login is
username:
password:
Click on "Friends" Link to see the spinner and the code below is viewable via firebug. Any help here is good help, this is actually my first time messing with ajax.
Thanks,
Nick
<script type="text/javascript">
$(function() {
$(".item-206").click(function() {
$("#dvloader").show();
$.load("friends", function(){ $("#dvloader").hide(); });
return false;
});
});
</script>

You have to tell it where to load the html into:
$('#div-you-want-to-populate').load("friends", function() { ... });
If you make an array of div ids, and name them the same as the target divs, you can do:
var ids = ['id1', 'id2','id3'];
for (i=0; i<ids.length, i++) {
$('#'+ids[i]).load("friends #"+ids[i], function() { ... });
};

use
$('element or id or class').load("friends", function(){ $("#dvloader").hide(); });

Using ajax javascript to load content into a div in web page

I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!

call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
return false;
});
});

Force page scroll position to top at page refresh in HTML

I am building a website which I am publishing with divs. When I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.
How can I force the page to be scrolled to the top on page refresh?
What I can think of is of some JS or jQuery run as onLoad() function of the page to SET the pages scroll to top. But I don't know how I could do that.
A better option would be if there is some property or something to have the page loaded with its scroll position as default (i.e. at the top) which will be kind of like page load, instead of page refresh.

For a simple plain JavaScript implementation:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}

You can do it using the scrollTop method on DOM ready:
$(document).ready(function(){
$(this).scrollTop(0);
});

The answer here does not works for safari,
document.ready is often fired too early.
Ought to use the beforeunload event which prevent you form doing some setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

Again, best answer is:
window.onbeforeunload = function () {
window.scrollTo(0,0);
};
(thats for non-jQuery, look up if you are searching for the JQ method)
EDIT: a little mistake its "onbeforunload" :)
Chrome and others browsers "remember" the last scroll position befor unloading, so if you set the value to 0,0 just before the unload of your page they will remember 0,0 and won't scroll back to where the scrollbar was :)

To reset window scroll back to top, $(window).scrollTop(0) in the beforeunload event does the tricks, however, I tested in Chrome 80 it will go back to the old location after the reload.
To prevent that, set the history.scrollRestoration to "manual".
//Reset scroll top
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

You can also try
$(document).ready(function(){
$(window).scrollTop(0);
});
If you want to scroll at x position than you can change the value of 0 to x.

Check the jQuery .scrollTop() function here
It would look something like
$(document).load().scrollTop(0);

The JS history API has the scrollRestoration property, which when set to manual, prevents the last scroll location on the page to be restored:
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
} else {
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
}

Instead of location.reload(), simply use location.href = location.href. It will not scroll to the previous position as location.reload() does.
Note: This will not reload if there is any # in the URL

<script> location.hash = (location.hash) ? location.hash : " "; </script>
Put the above script in <head> tag of your html. Not sure how single page apps behave! But sure works like charm in regular pages.

The answer here(scrolling in $(document).ready) doesn't work if there is a video in the page. In that case the page is scrolled after this event is fired, overriding our work.
Best answer should be:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

$(document).ready(function(){
$(window).scrollTop(0);
});
did not work for me as google chrome would just scroll back down after the page finished loading.
What I used was
$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
window.location.replace(url + "#");
} else {
window.location.replace(url);
}
});
// This loads the page with a # at the end. So it will always load at the top.

I found that these CSS styles force the page to always scroll to top on reload/refresh:
html {
height: 100%;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}

This is one of the best way to do so:
<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).scrollTop(0);
});
</script>

You can use location.replace instead of location.reload:
location.replace(location.href);
This way page will reload with scroll on top.

you can use it it your html page to
as:
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

The supercalifragilisticexpialidocious answer is:
add this at the top of your js file or script tag
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0; // For Safari