Upon loading a reasonably long page, I need to smoothly scroll down to a certain on the page, so that the user doesn't have to.
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#today').offset().top
}, 'slow');
});
...
<div id="today">foo</div>
This works well in a desktop browser, but on the iPhone and especially on the Android, it is pretty jerky.
Questions:
Am I going about it the right way? Is there a better way?
Is there a way to specify a specific interval in milliseconds, instead of 'slow'?
jQuery .animate() easing options appear set to swing by default , try setting to linear , e.g.,
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#today').offset().top
}, 2000, "linear");
});
#today {
position : absolute;
top : 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="today">today</div>
Related
I am trying to scroll down to some element when clicking on a button. But it isn't working.
The way I am using to do that is using query:
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
console.log('ios');
$("html, body, .wrapper").animate({
scrollTop: offset
}, 500);
} else {
$("html, body").animate({
scrollTop: offset
}, 500);
}
Those cases are almost the same, just read somewhere that animate is not working on html and body tags on ios.
However still can't make it work.
This is inside:
$(".elem").click(function () {
var offset = somenumber;
//and the code above
});
The way I've fixed it, is that I used jquery plugin called postMessage, which is a good way for cross-domain frame communication.
http://benalman.com/projects/jquery-postmessage-plugin/
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;
});
I have a comment section which automatically scrolls into view when you scroll it (using jQuery scrollTop), and then a button which scrolls you back up when you click it. The first scrolling action always runs perfectly, but the second scrolling action takes a seemingly random amount of time to occur after the button is pressed.
A live demonstration can be found here: www.rouvou.com/KanyeWest. Go down to the comment section, and scroll it to fire the first jquery scroll. Then click the "Back" button to fire the second scroll. It might work instantly the first few times you try it, but if you do it enough, it should be delayed eventually.
html
<div id="comment-section">
<div id="comment-background-up">BACK</div>
<div id="good_comments"><!--CONTENT--></div>
<div id="bad_comments"><!--CONTENT--></div>
</div>
jquery
$("#good_comments").scroll(function() {
$('html, body').animate({
scrollTop: $("#good_comments").offset().top
}, 700);
$("#comment-background-up").fadeIn(200);
});
$("#bad_comments").scroll(function() {
$('html, body').animate({
scrollTop: $("#bad_comments").offset().top
}, 700);
$("#comment-background-up").fadeIn(200);
});
$("#comment-background-up").click(function() {
$('html, body').animate({
scrollTop: $("#randomajax").offset().top
}, 700);
$(this).fadeOut(200);
});
Does anyone know what could be causing this delay?
I suppose this is happening because jQuery daisy-chains the animations. And you initiate the animation on every scroll. So the much you scroll, the more 700ms animations "pile up", hence your go back animation waiting for them all to finish.
It would probably be best to update your code to avoid chained scrollTop animations on the body.
However, for now you could fix this by using jQuery's stop function. I.e.:
$("#comment-background-up").click(function() {
$('html, body').stop(true, true).animate({
scrollTop: $("#randomajax").offset().top
}, 700);
$(this).fadeOut(200);
});
to keep scroll bar always at the bottom of the page i used
$(document).ready(function() {
$(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
It is working in the Firefox but it is not working in the chrome.
Why it is not working in the chrome can anybody suggest me the good solution to keep the scroll bar always at the bottom of the page.
Thanks for any help
If you want to move back to the bottom of the page even if the user attempts to scroll up, you are going to need to call your function on an interval.
$(document).ready(function() {
function scrollBottom(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
}
setInterval(scrollBottom, 500);
});
You can play with the interval to get the desired amount of UI interactivity.
Alternatively, you could bind to the scroll event, this will fire whenever the user scrolls.
$(document).ready(function() {
$(window).scroll(function(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
I am using this JQuery script for a vertical smooth scrolling effect. It works perfectly in Internet Explorer and Firefox but it's not smooth at all in Google Chrome's latest version??? How come? Should I change something in the script or is there another smooth scroll script that works nice and smooth across all browsers?
In Google Chrome, the smooth scroll effect actually jiggles and stops for a brief moment so that it all looks kinda ugly.
Here is the JavaScript/JQuery code:
(function() {
$('header ul a').bind('click',function(event){
var $anchor = $(this);
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top + "px"
}, 1500);
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
My HTML has 5 <section>'s and each section has it's own ID (Home, About, Services, Gallery and Contact) so there is nothing spectacular here. Thanks for help!