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

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks

function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

Scroll to bottom on page load

I have the following code, it's a chat display that I got using the Firebase API.
The problem is that, when the page loads, I want it to directly have the scrollbar set at the bottom. At the moment it is sort of sliding slowly to the bottom (because of the .animate).
How can I have the scrollbar always stay at the bottom when I reload the page, even if new content is added to the chat?
$(document).ready(function () {
var myDataRef = new Firebase('https://ot7fwnsj7h7.firebaseio-demo.com/');
myDataRef.on('child_added', function (snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#displayChat'));
// make text scroll everytime someone posts
$('#displayChat').animate({
scrollTop: $("#displayChat")[0].scrollHeight
}, 'slow');
};
});
And here's my fiddle:
http://jsfiddle.net/qxkr35pj/
I hope I've been clear! Thanks.

This line of code scrolls the element to its bottom.
Call it every time you update the view.
JSFiddle
$("#displayChat")[0].scrollTop = $("#displayChat")[0].scrollHeight

I think what you want is this instead of your animate code:
$('#displayChat').scrollTop($("#displayChat").height());
You'd also want to use that every time a message gets added - it'll take the scrollbar to the bottom of the div.

Scroll to a class on button click - HTML

I have a HTML page with a frame having lot of lines and a button "Next". On clicking Next Button, I should be able to navigate to a paragraph having orange color. All the paragraphs having orange color will be of same class.
That means, on page load I should be able to navigate to 3rd paragraph. On another click I should go to 6th paragraph and so on..
I tried to use document.getelementsbyclassname(). But I was not able to write logic to navigate to that particular location. Please help me out.

You can do this , like this
Working DEMO
$("p:first").addClass("active");
$(document).on("click","#ip",function(){
if($("p.orange:last").hasClass("active")){
var topVal = $("p:first").offset().top;
$("html body").animate({
scrollTop:topVal
},500,function(){
$("p").removeClass("active");
$("p:first").addClass("active");
});
}
else{
var nextElem = $("p.active").nextAll("p.orange:first");
var topVal = nextElem.offset().top;
//alert(topVal);
$("html body").animate({
scrollTop:topVal
},500,function(){
$("p").removeClass("active");
nextElem.addClass("active");
});
}
});

You can try this. First, create a variable called, lets's say, number which stores which paragraph we currently need to scroll to. Like 1st, 2nd, etc. When the page loads, it's value will be 1.
var number=1;
The next step is to add ids to all the orange paragraph. The first paragraph gets id orange1, the second one gets id orange2 and so on. You can either do this manually or if there are too many paragraphs you can try adding it by looping or something like that.
Now assuming the Next button has an id called 'button' you can add this code:
$('#button').click(function() {
$('html, body').animate({
scrollTop: $('#orange'+number).offset().top
}, 1000);
number++;
});
Now, whenever you click on the Next button, the page should scroll to the correct paragraph. Hope this helps.

Clicking on anchor takes me to the bottom instead of restoring the previous position

I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.

I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.

You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}