Scroll page on page load if at top of page - javascript

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();
})

Related

prevent scroll after page reloading

I save current scroll position using the following way:
$(window).on('unload', function() {
if ($(window).scrollTop() != 0) {
localStorage.setItem('lastScrollPosition', $(window).scrollTop());
$(window).scrollTop(0);
}
});
After page reloading I load images and I need to scroll at lastScrollPosition only when all images are loaded. So I call $(window).scrollTop(lastScrollPosition) after all images are loaded, browser scrolls at lastScrollPosition, but after that browser also scrolls at top of page (like $(window).scrollTop(0);), therefore, I get these action: $(window).scrollTop(lastScrollPosition) -> $(window).scrollTop(0)
Could you please advise how to fix my issue?
I found out the reason of the issue. This way works correctly, but a instagram library scrolls to top after my scroll. So this library has strange behavior.

scroll top according to url parameter

I have a site that carries a particular parameter in the URL called "onsale". I would like the page to scroll to a certain div with a class called "bbbb" when the page loads IF the parameter "onsale" is in the URL. Here is my code so far:
var url = window.location.href;
if (url.search("onsale") >= 0) {
//found it, now do something
console.log("yep");
jQuery('html,body').animate({
scrollTop: jQuery(".bbbb").offset().top
});
//jQuery("body")jQuery('.four-column-sales-pod').scrollTop();
}
The scroll effect has two problems.
it is not scrolling the window so that the div "bbbb" is at the top of the page - it scrolls so that it overshoots the div by about half of the div length.
The more confusing issue is that sometimes it will scroll to the div at halfway and othertimes it will scroll to the div at halfway then scroll back to the top of the page. Have no idea what is causing this.
Try this:
$(function() {
var url = window.location.href;
if (url.search('onsale') != -1) {
$('html, body').animate({
scrollTop: $('.bbbb').offset().top
}, 500);
}
});

jQuery - scroll or jump to top

The context: I have a one page web app. So there's lots of div's being hidden at any one time (I'm not sure if this matters). What I am finding is that when a user is finished with one page (Page X), then they click back (to Page Y) - if they return back to Page X then the position is the same as when they left the page. The back button is at the bottom, so that's where the user ends up again.
What I want, is when they return to Page X for them to be at the top of the page so they can start again. Whether it scrolls back or just jumps back - either way is fine.
I've tried all of the following with no success:
// Scroll to top
setTimeout(function(){
alert('scroll');
$('html, body').animate({scrollTop : 0}, 2000);
}, 2000);
Adding a div with the id top-anchor at the top and using:
$('html, body').animate({
scrollTop: $("#top-anchor").offset().top
}, 2000);
Having a and using an anchor, with the code below (it only works once though, after that as the hash is already in the URL it no longer works I suppose):
document.hash = '#top-anchor';
Also tried:
window.scrollTo(0, 0);
No luck.
Any alternative ideas are much appreciated.
You can achieve something like that: DEMO : https://jsfiddle.net/yeyene/bpwtLg1w/1/
Not sure how your content divs are shown and hidden, but just get the idea of adding scroll to top of page div part.
Add scroll event on Back button click event, since you already known which page to go, you can scroll to this page's top, by using...
$(element).position().top
JQUERY
$(document).ready(function () {
$('input[type=button]').on('click', function(){
getPageID = $(this).attr('id');
$('.page').hide(0);
$('div#'+getPageID).show(0);
$('html,body').animate({
scrollTop: $('div#'+getPageID).position().top - 10
}, 500);
});
});

How to make page always go to top when loaded?

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 */
})

How to jump to certain position of scrolled element without scrolling the main screen?

I have a container (div) on the page. This container has a scrolling (provided by overflow:auto; height:400px).
I need no provide a URL, that will open a page so that the main page will not be scrolled, but the text in the container will be scrolled.
I tried www.mysite.com#position, but by this way the main page is scrolled too (and I need, that users will see the header on the top of the screen, and the "#position" position on the top of the container)
This is possible with javascript. And I will show a jQuery example here.
if (window.location.hash == '#position') {
$('#containerDiv').animate({
scrollTop: $("#actual_position").offset().top
}, 2000);
}
The actual_position should be the place where to scroll to. position should just be in the url and not on the page, to prevent the whole page from scrolling.
May you use the css-properties: position:fixed, top:..., left:... for your element that should stay at a certain place on your side, when an user scrolls.
Furthermore you can put all content that you do not want to be scrolled into a div and define the css-properties.
I hope this helps you a little bit.
Really it's an upgrading of Arjan answer (and now this really works).
As Arjan's suggestion the script will not work every time, but only by providing #scroll in the end of url (www.mysite.com#scroll). This script will scroll the container scroll bar to the #position element, and the all document will stay.
jQuery(window).load(function(){
container_top = jQuery('#container').offset().top;
element_top = jQuery('#position').offset().top;
element_relative_top = element_top -container_top;
if (window.location.hash == '#scroll') {
jQuery('#container').animate({
scrollTop: element_relative_top
}, 2000);
}
})

Categories

Resources