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";
}

scrollTop duplicating values each time function is called

I have 2 divs that each time one of them is clicked it scrolls down to a common content div called .nbm_specs. The first time you click it scrolls correctly, however any subsequent clicks make the scrolling go crazy and it keeps scrolling up by a small amount each time.
It is acting like it is stacking the offset top each time you click on it.
I have established the scroll in a function that I then call in each .on CLICK function.
//hidel all at start
$(".prostar,.X10,.x20,.x23,.x30,.x46,.xstar").fadeOut(0);
//Scrol when clicekd
function SpecScrol(){
$('html, body').animate({
scrollTop: $(".nbm_specs").offset().top -80}, 1500);
}
//NAVIGATION SECTION FOR MODELS
$("#prostar").on('click', function() {
$(".prostar").fadeIn(0);
$(".X10").fadeOut(0);
SpecScrol();
});
$("#X10").on('click', function() {
$(".X10").fadeIn(0);
$(".prostar").fadeOut(0);
SpecScrol();
});
Thanks in advance

SOLVED.
The issue was that there are multiple .nbm_specs div and the code wasn't sure which to go to and getting all confused. Fixed this by creating a blank div just above the .nbm_specs div with a unique id.

How to Initiate Image Fade Out and Fade In with jQuery Function

I have a little jQuery function in my Asp.Net MasterPage that fades an image out after 3 seconds. It works fine, but I'm having difficulty getting it to fade back in. I've tried several things as I'm new using jQuery, and I know there's something I'm doing or not doing. I can't put my finger on it. Here's what I have:
<script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow', function(){
$('#Image1').remove();
});
}, 3000);
});
var fadeBack = function () {
$('#Image1').fadeIn();
};
fadeBack();
</script>
Like I said, it fades out with no problem, but I cannot find the right code structure to bring it back in. I'm thinking maybe an If statement block about the opacity is needed?
The real trick is that I want alternate images in 3 boxes I have as seen here:
I have about 12 images total, and just want them to fade one image out, and bring another in. Being more specific, I mean the following:
Column (1): Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn(), and etc.
So for now, I just need help with how to do this in Column One, and I'll see if can string something together to make the other Columns 2 and 3 follow up. The timing would be 3 second for each.
Lastly, could I use an array to store other images which aren't in the Column One box already and call them into the slideshow fade sequence? I appreciate you help for this knowledge, so I can lock this in mind. Thanks.

Use this code, it will hide the image after 3 seconds and after that 1 sec, it will show image back.
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow');
}, 3000);
setTimeout(function (){
$('#Image1').fadeIn('slow');
}, 4000);
});
if you want like a slideshow use this code
<div class="yourimg_container">
<img src="http://localhost/app/img/off.png" id="Image1"/>
</div>
/* make an array containing your images path (you can fetch images from database using asp.net/php query)*/
var ss= ["http://localhost/app/img/off.png",
"http://localhost/app/img/on.png",
"http://localhost/app/img/slider.png"];
window.setInterval(function(){
slideshow();
}, 3000);
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) $('#Image1').attr("src",ss[0]);
else $('#Image1').attr("src",ss[i+1]);
}
}
}
additionally you can use other effects like this
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[0]);
$('#Image1').fadeIn(700);
}
else {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[i+1]);
$('#Image1').fadeIn(700);
}
}
}
}

Your fadeBack() is launched immediately whereas the fadeOut has 3 sec delay. Set a timer for your fadeBack grater than 3 sec and the img will appear.

There is a function $('#Image1').remove(); Applied. It mean once fade over, the html block will be removed. Then you can't access the object. Because fade in and fade out accessing same id #Image1. So comment the line. It may work.

Run multiple settimeout or showit functions on different page elements

Note: I am not a developer. More of a hobbyist (read n00b).
I have tried searching for an answer to this but so far have not found anything that provides an answer to this specific scenario.
I know this is relatively basic but, I am trying to create a page with three hidden elements that are revealed either after a time delay or a mouse click. What I am struggling with is getting all three elements to run on the same page.
Required:
Element 1: Hidden image to be revealed 10 seconds after page load
Element 2: Hidden div to be revealed 10 minutes after page load
Element 3: Button image inside element 2, when clicked reveals another hidden div
I am using the following setTimeout function to reveal element 1, but I can't get a second setTimeout command to run after this.
<script language="javascript" type="text/javascript">
var pop=10;
function showIt() {
document.getElementById("hid").style.display = "block";
}
setTimeout(showIt, 10000);
</script>
I tried repeating this code for the second element changing the Element ID to "hid2" but it will not run. Do I need to use a cleartimeout function to end the first settimeout?
I then need some code for element 3 to run on a mouse click after element 2.
Getting all three bits of JS to play nicely together seems to be beyond me.
Your help would be much appreciated!

I believe this is what you're asking for.
<img id="hid" src="img/darkred.jpg" style="width: 20px; display: none;"/>
<div id="hid2" style="display: none;">div 2
<input type="button" value="show div3"/>
</div>
<div id="hid3" style="display: none;">div 3</div>
function showIt(hid) {
document.getElementById(hid).style.display = "block";
}
function revealEl(id, delay){
setTimeout(function(){
showIt(id);
}, delay);
}
revealEl("hid", 4000);
revealEl("hid2", 6000);
$("#hid2 input"").on("click", function(){
showIt("hid3");
});

HTML and jQuery anchoring

Whenever the url contains the div id, it would obviously go down to the div when the URL has:
http://domain.com.faq.php#1
<div id="1">Bla bla bla</div>
But what I like is to have same feature of Stackoverflow, when you click on an answer in your messages, it will scroll down to the page and has that fadeOut effect on the answer.
How do I do this?

Animation to a valid anchor destination cannot be animated on page load that I know of since the browsers will default to scrolling the user down the page to the anchor. For in-page links, you can hijack the anchor links and animate.
However, on new page loads like on SO, you will notice the page does not animate down, but just scrolls down, though the box does animate a color. This is how you could do it in jQuery. Be sure to include the color plugin if you want to animate background-colors.
<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
$(window).load(function(){
var hash = window.location.hash;
if(hash){
$(hash).css('backgroundColor', '#AA0000')
.animate({backgroundColor: '#FFFFFF'}, 200);
}
});
</script>
You can use DOMReady instead of load, but it might try to run your animation too soon, and the user will miss it.
If you only wanted to animate div's with a specific class, you can add a filter to your find:
$(hash).filter('.my_div').css ...

Use:
event.preventDefault();
For example:
$('li.share a').click(function(ev) {
ev.preventDefault();
var link = ev.target.href;
var id = link.substring(link.indexOf("#") + 1);
$('#' + id).fadeOut();
});

StackOverflow uses anchors as well. The post you're currently reading is:
HTML and jQuery anchoring
It's simply <a name="anchorName"></a>
at the address bar: [urlToPage]#anchorName
Now, to get the fade effect [in pure JS w/o frameworks]
Set the div.style.opacity = 0;
var intervalId = setInterval( function(){
if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);
The clearInterval part isn't necessary, since once opacity goes above 1, browser won't render differently [although the number keeps adding...]