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
Related
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();
I have a fixed to top navigation. I have this navi from Bootstrap 3. On my page, I have several links, which have an svg image inside. By hovering on the link, it begin to move up and down. When I click to these links, my page scrolls smooth down to a specific position. But when I am trying to scroll down or up after clicking to those links, my navigation starts flickering in chrome. But when I click anywhere on the page with the mouse, it stops flickering.
What could be the problem or how to emulate a mouseclick anywhere on the page?
I tried:
$('body').click();
But it did now work.
Here is my site:
http://mival.de/examples/mival/index.html
When u click on the black arrow and scroll after the page in chrome, the navi start flickering.
JS Scroll
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(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();
setTimeout(function() {
$('#homeSection').click();
}, 500);
});
});
Ok, found the solution. just added the following, to my arrow:hover class:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Do not really know, what it do, but it works!
P.S.: Besides that, I changed the measure of my translateY rule from em to px.
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/
I'm trying to scroll to the bottom of my page after the user submits a form. However, when I execute the following code, the browser scrolls to the bottom of the page, but will not allow me to scroll back up (via mousewheel, scrollbar, or arrow press) without locking/shuttering/juddering.
var scrollToBottom = function() {
$("html, body").animate({ scrollTop: $(document).height() - $(window).height()}, 0);
}
Any idea what's causing this? It seems to "relax" its grip on the browser after about five seconds.
I ran your function and it did not lock me at the bottom for 5 seconds. By default it will lock when scrolling and release you when the browser reaches the predetermined location.
http://jsfiddle.net/oq9eo2zz/2/
Something else is likely causing the issue, but if you're looking for a quick work around you could force it to unlock (stop animating) on 'mousewheel DOMMouseScroll keyup keydown'.
$(window).on("mousewheel DOMMouseScroll keyup keydown", function(e){
$('html, body').stop();
});
0 duration:
http://jsfiddle.net/oq9eo2zz/1/
3000 duration:
http://jsfiddle.net/oq9eo2zz/4/
Hope this helps!
Use This
var scrollToBottom = function() {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
}
OR
function scrollToBottom()
{
alert("Scrolling to bottom ...");
window.scrollTo(0, document.body.scrollHeight);
}
The website I am building has a very weird behavior. I want to be able to scroll animate to the previous section when user clicks back/forward button. Here is my code:
var scrollToSection = function($section) {
$('body, html').animate({
scrollTop: $section.offset().top
}, 700, 'easeInOutExpo');
}
$(window).on('popstate', function(e) {
e.preventDefault();
scrollToSection($(location.hash));
});
This just straight up jumps to the section without animating the scroll. What am I doing wrong?
Full Code: http://codepen.io/Gasimzada/pen/FHzsG. If you open the output frame in a new tab you can see the weird behavior by clicking the back button after scrolling to the bottom or some other place.