I need to make my current web page always refresh to the top of the page.
Currently it refreshes to the bottom.
What code might I use and where would I place it?
Here 's how you can do it with jquery:
$(function() {
$('body').scrollTop(0);
});
or with javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
You can set scroll head to the desired level by assigning the element head to the scrollTop on load.
eg:
$(window).load(function() {
$('html, body').animate({scrollTop: $(".first-section").offset().top}, 2000);
});
So you can use the first div's id or class to scroll it up on top every time you reload the page.
It's as simple as inserting document.body.scrollTop = 0 as the first line of you document load function.
$(function() { // same as $(document).ready(function() {
document.body.scrollTop = 0; // |OR| $('body').scrollTop(0);
/* do work */
})
Related
Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.
No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.
$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle
I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});
$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});
I have three sections on my page, from top to bottom, A, B and C. You click on a button in section C. Now, some content is loaded in section A (above the button you clicked on), e.g. the content uses jQuery's slideDown() method.
Now, section C scrolls a little bit down (because the new content is making it do so). That's what I'd like to prevent. Is there a way that the browser automatically scrolls page to be at the exact same position as before the content loaded?
If you want to make sure that the button does not move on the screen at all, even though content is added above it, this should do it:
$("mybutton").click(function() {
//Save the vertical position of the button before content is added.
var x1 = $(this).offset().top;
//Do whatever the button is suppose to do, including adding the new content.
doAllTheStuff();
//See how much we moved.
var x2 = $(this).offset().top;
var dx = x2 - x1;
//Scroll the same amount to keep the button from moving on the screen.
$(document).scrollTop($(document).scrollTop() + dx);
});
If you are using this functionallity a lot on your page, you might want to wrap up the code a bit nicer. Here is a working JSFiddle.
This might also be interesting reading:
http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
Maintain page position while page length changes
jquery - keep window from changing scroll position while prepending items to a list?
You can scroll page to element when click on your button (probably your element).
$('html, body').animate({ scrollTop: $("#element").offset().top }, 2000);
Here an example: https://jsfiddle.net/kmser1uh/
UPDATE
A trick for scroll in the same exactly position is to save the offset of the element in the page after the scroll, and animate the scroll after button click.
The updated example:
https://jsfiddle.net/kmser1uh/2/
This is the save part:
var el;
var elPos;
var clr;
$(window).scroll(function(){
clearTimeout(clr);
clr = setTimeout(function(){
$('.fullWidthBodyElement').each(function(){
if ($(window).scrollTop() > $(this).offset().top &&
$(window).scrollTop() < $(this).offset().top + $(this).height()) {
el = this;
elPos = $(window).scrollTop() - $(this).offset().top;
}
});
},500);
});
And this the resume position:
$('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);
You Migt be using # in href attribute in anchor tag usejavascript:void(0);then you page will not get scrolled.
Here is the javascript code for scrolling down the page :
function down() {
var scrolled=0;
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
It works fine but it only works one time. If I click again it won't work. How can I find the way so this work as long as I click?
Any help will be appreciated.
You're using a constant (1000) for where to scroll to the page. Once you hit 1000 pixels from the top, telling it to scroll there again will do nothing.
Are you trying to scroll 1000 px from wherever you're at? To do that, you need to use the scroll distance:
var scrolled = window.pageYOffset;
since you're using jQuery you can also use
$(window).scrollTop();
You’re always scrolling to the same position (1000). Whenever you call down(), you set scrolled to 0.
You’ll need to define the scrolled variable outside the function scope.
Example:
(function () {
var scrolled = 0;
function down() {
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
$('#scroll').click(down);
}());
(Assuming your button or link element that should trigger the scroll has the ID scroll)
If you wаnt scroll +1000px whenever you call down, try this:
var down = (function() {
var scrolled=0;
return function() {
scrolled += 1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
})();
I would like to do something if the page is detected to be at the very top of the page otherwise don't do it. I'm guessing I need to use and if statement somehow but I'm just not sure how to do this.
For example, I want the page to scroll to 125 pixels if the page is at the very top otherwise don't scroll to that position.
$('html, body').animate({scrollTop:125}, 4000);
Use this on load:
function checkTop(){
if ($(window).scrollTop() == 0) {
$(window).animate({scrollTop:125}, 4000);
}
}
checkTop();
$(window).scroll(function(){
checkTop();
})
I've a function that scrolls my Index page to a specific anchor tag and changes the background image. The problem I have right now is that I need to use the links in my Menu page to move to the anchors in my Index page and change that background image. My Menu Page appears at the top of my index page.
The Javascript I have for scrolling inside my Index page is:
$('-Button-to-scroll-is-clicked').click(function () {
clearInterval(ID);
$('html, body').animate({
scrollTop: $('-Anchor').position().top
},
3000);
var IntID = setInterval(changeImg, 1500);
function changeImgHome() {
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
};
ID = IntID;
return false;
});
The Javascript that I have for scrolling my index page from my Menu page is:
$('-Button-In-Menu-Page').click(function () {
$('html, body').animate({
scrollTop: $('-Anchor-In-Index-Page').position().top
},
3000);
return false;
});
As I've said, I need to check in my Index page the position I'm at after scrolling (using the window.scroll function) so I can change the background image appropriately.
Well, first, position gathers the position of the element. By default, elements are placed inline and have a static position and no position coordinantes, so using .position().top will fail to yield the page position unless you've placed all of these things in absolutely.
That's not a problem though, because we have .offset. Offset tells you the x and y positions of the target relative to the document, so we'll use that.
Now our functions should look like this
window.onready = function(){
$(-Button-to-scroll).on('click',function(){
var itemPos = $('target').offset().top;
$('body,html').animate({scrollTop:itemPos},3000);
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
}
}
EDIT: for your scrolling. This isn't the most efficient way of doing it since it will basically keep rewriting your background image every time the user scrolls.
$('html').on('scroll',function(){
var top = $(this).offset().top
if ((top >= 200)||(top <= 300)){
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
}
});
Your current position on the page can be retrieved with $(window).scrollTop().