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.
Related
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 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.
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 try to load specific location in same page. But the problem is, the header is fixed on position top, When I click the links, the header go behind of the header. So I am not able to show some contents. Please visit this Fiddle. You can understand what I am try to say.
I dont like to add padding and margin.
You might want to change your HTML. There can be only one id per page.
In the given fiddle, you have a repeating <div id="one">
Now, to get the scroll working, you could do something like this :
$(document).ready(function(){
$("a").click(function(e) {
e.preventDefault();
var hash = $(this).attr("href");
//console.log($(hash).position().top);
$('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);
});
});
Here $(hash).position().top gets the position of the div on the page and I subtract 50 from it (the height of the fixed div).
Here is a fiddle