I have written the most basic scrollTop function to move the page focus down to the content of the site - skipping past the header / nav / hero images, if the page is page number 2,3,4,5,6... of products.
if(window.location.href.indexOf("/?sf_paged=") > -1) {
$('html, body').animate({
scrollTop: $(".searchandfilter").offset().top
}, 2000);
};
If I run this in my console (before implementing into live code) the page operates as expected - moves to the element I state and positions it to the top of the page.
However, here is where my question lies: Once I place this in my code to run on ready (implemented into my footer scripts) it passes the element I wish it to scroll to (stops 3/4 of the way down the page not 1/4).
I need it to stop when it hits the element not afterwards - I know this code works, can anyone think of a reason this may be happening?
Thanks, Jason.
As HerrSerker and Andrei have brought to light - running on load allows the elements above to have loaded before it decides to scroll down the page.
$(window).bind("load", function() {
if(window.location.href.indexOf("/?sf_paged=") > -1) {
$('html, body').animate({
scrollTop: $(".searchandfilter").offset().top
}, 2000);
};
});
Thank you for bringing your solutions you have helped a whole lot of brain ache.
Related
I use this script to scroll down to a certain anchor when page is loaded:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
});
Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.
I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?
Thanks so much in advance!
The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});
In my site, http://lol.bu.edu/ctl/home-2/, when I click on the Questrom Team Learning button, it goes to the link correctly, which is http://lol.bu.edu/ctl/home-2/#after_layer_slider_1.
However, if I manually type in the link or refresh the page in mobile (screen width less than 750px), it goes to the same height location for the link as it would normally go to for a full width (which is further down on the page for mobile).
Sometimes when I refresh the page it briefly goes to the right location before scrolling down again.
Is this a javascript problem and how would I solve it?
Your page http://lol.bu.edu/ctl/home-2/#after_layer_slider_1
remove the #after_layer_slider_1 at the end of the url. The #after_layer_slider_1 is targeting a location on your page and is why it is moving down. Jus t simply remove that part of the url and it will load at the top of the page.
and if you do not want to have it do that at all ctr+f and look for "after_layer_slider_1" in your javasrcipt, delete that part and it will stop doing the page scroll alltogether.
Just feast your eyes, on below, bro
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
});
Live Demo (smooth scroll 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);
});
});
I tried to implement the scrollTo funcion but the problem is that when i scroll i want the element that i scrolled to at the topof the screen not in the middle or somewhere else.
JsFiddle
here is the js funcion
$(document).ready(function () {
$(".scroll").click(function (event) {
$('html,body').animate({
scrollTop: $("#footer").offset().top
}, 500);
});
});
Your problem here is that there is not enough space at the bottom of the screen to scoll so that the targets ends at the top. The scrollbar is fully at the bottom.
Add a lot of whitespace at the end of the page, this will give more room for scrolling. When you do this, your code works just fine.
It is because your page isn't tall enough. To make a javascript function that automatically makes the page high enough (no matter what is in it) do:
$("body").height("100%");
$("html").height(($("body").height()) + 500);
see: http://jsfiddle.net/ZNV7G/1/
If you want to be extra sure you can replace the + 500 with * 2, but that will be a bit excessive in smaller documents.
i have a long scrolling page with lots of divs, one below the other. i would like to scroll automatically when you visit (or reload) the site to scroll from top to a specific div near of the bottom. to jump there isnt a problem, but i want the "scroll" effect. ive checked out scrollTo() but i dont get it to work.
my first attempt was something like
$(document).ready(function () {
$.scrollTo('#div5'); });
but it doesnt fire anything. a little bit help needed :)
thanks
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/