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);
});
Related
I have a page where there many are a loop of posts with description and images.
then I used this function to scroll to element
$('html, body').animate({
scrollTop: $(".entry" + vm.note).offset().top + 200
}, 1000);
the probleme is sometimes I scrolled to go element and sometimes not.
I dont know why.
PS: I using angularJS
It might be the DOMs are still rendering and it can't calculate the exact top distance from body/html to the element(".entry"+vm.note) you want to scroll.
You might try to put a delay before you execute your code using timeout.
setTimeout(function(){
$('html, body').animate({
scrollTop: $(".entry" + vm.note).offset().top + 200
}, 1000);
}, 3000); //set it longer if it's still not scrolling
I'm trying to freeze scroll at a div position till user click, hover another div. After user action, scroll should be released and work normally! But it doesn't work! How can I make scroll work normally after user hover, click on this div? Here is the full code for reference: https://jsfiddle.net/tqwr3hrp/ (tested on chrome)!
<div class="stopscroll">click/mouseover here to stop</div>
<div class="likebox"></div>
$(window).scroll(function(e) {
$('html, body').animate({ scrollTop: $('.likebox').offset().top - 100 }, 1000);
});
$('.stopscroll').on('tap click mouseover', function(e) {
$(window).off('scroll');
//another attempt
$('html, body').off('scroll');
//and another attempt
$('html, body').stop().animate();
});
This code makes that your page actually scrolls automatically:
function start_scrolling() {
$('body').animate({
scrollTop: $('body').height() - $(window).height()
}, 10000, 'linear');
}
start_scrolling();
This code lets the scrolling stop if you hover your div and lets it start again if you unhover it. Instead of doing the same with click I recommend adding a checkbox, which I did in this example. If the checkbox is checked, scroll as usual, if not, let the user scroll himself.
$('.stopscroll').mouseover(function() {
$('body').stop();
}).mouseout(function() {
if($('#autoscroll').is(':checked')) {
start_scrolling();
}
});
This last code is a bonus and lets the user take control immediatedly: If the user scrolls, the autoscroll is deactivated. If he wishes to enable the autoscroll again, he can use the checkbox.
$('body').on('scroll wheel DOMMouseScroll touchmove', function() {
$('body').stop();
$('#autoscroll').prop('checked', false);
});
JSFiddle
I have a page where all the content is in one page and clicking in a link on the navbar does a scroll animation to the relevant section. Code pen is http://codepen.io/meek/pen/NNprYb?editors=0010
I'm using the following code for the scroll animation:
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});
My question is whether there is a way to cancel this animation when the user clicks another section while the animation is still playing. At the moment it completes the previous animation and adds the next one to a "queue", meaning that if you spam click different sections you get stuck in animations you can't cancel out of.
Found it, just add this code before the animate():
$('html, body').stop();
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);
});
});
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>