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);
});
});
Related
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.
I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it
I have a page where some a elements which are in a div which is position: fixed. Clicking these a elements I've intended the windows to scroll smoothly to another a element with a corresponding name attribute.
The setup is quite simple, it goes like this:
<img src="someimage.png"> <!--anchor tag to click -->
<a name="bluefield"></a>
And I have this as a jQuery script running:
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
Now, the code works, and smooth scrolling is happening, but whenever I click let's say anchor A, and then it scrolls down to the right anchor tag with the corresponding name attribute, once I click that anchor A again it scrolls back to the top.
What's more is that when I click anchor A and get to the right position, and then I click anchor B, the window scrolls to the top, but with the apparent offset from anchor A to B.
So let's say I clicked on the "Bluefields" link and got to the Bluefields section, and 500px below that is the Greenfields section. Now, when I click on the "Greenfields" link while viewing the Bluefields section, the window scrolls back to the top but has a 500px offset from the top.
I am desperate to find the answer to this because it's driving me insane.
Here, I've provided a JSFiddle for it that replicates exactly the behaviour I'm talking about
https://jsfiddle.net/worldwarotter/es6trw97/
Because the page is scrolling down, you need to include the scrollTop position of the page (demo)
$('a').click(function() {
$('html , body').stop().animate({
scrollTop: $('[name="' + this.hash.substr(1) + '"]').offset().top + $(window).scrollTop()
}, 500);
return false;
});
I also included a .stop() to stop the animation if someone rapidly clicks on the links.
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)
I am currently using a bit of javascript to move the user down to the location of the information they click on in a side navigation menu. However the problem being if they click on one item and then another item when they go to scroll away the animation is still trying to complete. Is there a way to prevent the js from running if already at the top of the scroll top destination. I have a .stop() in already to stop the original animation on click. Or possibly cancel animation on scroll away?
$('#zoomTo li a').on('click', function(e) {
$('html, body').stop().animate({
scrollTop : $('#scrollDest').offset().top - 20
}, 1000);
e.preventDefault();
});
From the jquery site use:
.clearQueue().finish();
http://api.jquery.com/finish/