JQuery: Automatic Smooth Scrolling - javascript

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.

Related

Problem with scrollTop - 30s should last, 29s stays at one place

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>

Javascript scrollTop bug

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.

jQuery auto scroll to elements

I came across this useful blog Smoothly scroll to an element without a jQuery plugin
In the below code
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Auto scrolls down to target-element if sliderOn id exists within the body, but, because i have a fixed navbar the target-element goes behind it and cause not to show 20px of the target-element on top. Any solution here?
Try this:
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top - 20
}, 1000);

smooth scroll does not work with overflow-y

I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.
The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});

scrollTo not scrolling to the start of the element

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.

Categories

Resources