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();
Related
I have this code which is supposed to smooth scroll to an anchor on the page whenever an tag is clicked. However, this code does not scroll smoothly but instead jumps to the div.
$('a[href*="#"]:not([href="#"])').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
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
This is pretty simple question I think for those who knows javascript/jquery good. I am pretty new to all this and couldn't make it. I found code that is calculating the offset of navbar that looks like this:
var offset = 50;
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
And here is the fiddle example of what I have so far. As you can see if you click link in navbar it just skips to section. Where in this script to add easing so it scroll down a bit smoother?
With original code I found first I had that smooth scroll but with new script is lost. This is the old code:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Plavookac Hi there.
I have set up a working sample here in this Fiddle for you.
When you place this code in your page, place it below all of you other js script links. or if you put this in a script link, place the link at the end.
I take it that you would already have the jquery link .
Have a look at this code here, you will see the smooth scrolling and the offset.
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: "#navbar"});
// Add smooth scrolling on all links inside the navbar
$("#navbar a").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});
Notice this line of code... event.preventDefault(); this is used to prevent that flicker when first clicked to start the scrolling.
This part of the code will handle the smooth scroll.
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
Does this help?
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);
});
I am currently using a bit of javascript to move the user down to the location of the information they click on in a side navigation menu. However the problem being if they click on one item and then another item when they go to scroll away the animation is still trying to complete. Is there a way to prevent the js from running if already at the top of the scroll top destination. I have a .stop() in already to stop the original animation on click. Or possibly cancel animation on scroll away?
$('#zoomTo li a').on('click', function(e) {
$('html, body').stop().animate({
scrollTop : $('#scrollDest').offset().top - 20
}, 1000);
e.preventDefault();
});
From the jquery site use:
.clearQueue().finish();
http://api.jquery.com/finish/