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)
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 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.
I have a fixed menu at the top of my screen with 4 option, each option when clicked will scroll to a section within the page. The code I am using is as follows:
$("#click1").click(function (){
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
The scroll works as expected but when I click the options I get a flash of a white page. Has one else seen this and know any solution. Not sure if it's caused by the fixed menu element on the page.
I had this issue before. Try this:
$("#click1").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
Here is the jQuery API: http://api.jquery.com/event.preventdefault/
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 have an HTML file with an element inside it with id="start_section".
I want that when the page loads it will scroll down to this element so i added the following scrip:
jQuery(document).ready(function()
{
// scroll 20px above this div
jQuery('html, body').animate({ scrollTop: (jQuery('#start_section').offset().top)-20 }, 800);
});
Now, it's working just perfect on the first time the page is loaded.
But, As soon as the Activity is recreated for some reason, like orientation change, something weird happens: The page is reloaded, and then instead of scrolling down to the specific element, it is scrolling all the way to the bottom of the page.
I tried to disable the cache but it didn't help.
Any Ideas?
Try to just use "jQuery('body')" instead of "jQuery('html, body')"