I have 7 sections on the website (#section1, #section2, ...). In #section1 I have a button #click_to_start. After clicking it, it should take me to the bottom of the website (to footer #lastFooter) using this code
$("#click_to_start").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#lastFooter").offset().top
}, 30000);
});
The movement from #section1 to the bottom of the page should last 30seconds (because there are various animations playing during the scroll).
The problem is, that when I click the button, I stay 29 seconds on #slide1 (the animations are playing very very slowly) and then the last 1second it just rushes me from #slide1 to bottom of the page.
Here is the ink to the website : http://php.soulmates.company/main.php
In my language the button is called "Klikni pre prehratie". There is also an option in menu to change to English language, but not everything is translated and it takes you to the old index.php, so it is not useful for you now sorry.
okay code is messy
But I think this can help you
$("html, body").animate({ scrollTop: $("#container").height() }, 30000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div>
</div>
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
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 have a page (that I control) that I would like it to have automatic smooth scrolling (at a controlled speed until the bottom of the page is reached).
Here is an example http://tim.theenchanter.com/2008/08/autoscroll-in-safari-firefox.html
Is there any way that could be done with jquery (not as a bookmarklet)?
This example will take 30 seconds to scroll to the bottom of the page.
start scrolling
<p> lots of content here </p>
<h2 id="bottom">bottom of page</h2>
<script>
var oneSecond = 1000;
$('a').on('click', function() {
$("html, body").animate({
scrollTop: $(document).height()
}, 30 * oneSecond);
return false;
});
</script>
You can also see
http://css-tricks.com/snippets/jquery/smooth-scrolling/
and
jQuery Scroll to bottom of page/iframe
for other examples.
lmgtfy
Sounds like you want it to be a constant speed - params aren't as explicit as that bookmarklet but you can adjust the easing type and duration to your liking.
Then it's just a matter of binding this to $(document).ready.
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/