When You click on button, page should scroll down, to div with id="myTarget".
here is my HTML:
<button class="go"> GO </button>
<div id="myTarget">
<p>
la lalal lalala lalala
</p>
</div>
and jquery:
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
My problem is that when you click a few times on button, page scroll down. After that you can't scroll up. Is any way to stop click event while page moving?
JsFiddle
And if you stop the animation when user mousewheel?
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
Demo
What about disabling the button while it is running and enabling it again once animation is done?
$(function() {
$(".go").on('click', function(event) {
var $but = jQuery(this);
event.stopPropagation();
$but.attr("disabled", true);
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000, "linear", function(){
$but.removeAttr("disabled");
});
});
});
I assume you mean that if you rapidly click the button a couple of times it'll scroll down and not let you scroll back up, and not that it doesn't work when you "Click Button, Scroll Down, wait, Scroll Up".
If it's the first case, you can fix it like this.
$(function() { $(".go").on('click', function(event) {
event.stopPropagation();
$(".go").attr("disabled", true).delay(3000).attr("disabled", false); $('html, body').animate({
scrollTop: $("#myTarget").offset().top
},
3000);
});
});
This means that when you click on the button, it will be disabled for 3000 milliseconds (the time of your animation. This should stop a user from being able to click on it and trigger the animation more than once while it's animating.
The issue is that your animation is getting appended onto the previous animation for the html and body tags. Thus, you have to wait for all of the animations that have been started to die before you can scroll back up.
Things that you can do about this problem
Make the duration of the animation smaller
Call stop() on the elements you are animating before creating the new animation
Call stop() if the window is scrolled. This solution could be problematic if you ever have the body tag doing other animations. The first two solutions should be enough, anyway.
The first should be self explanatory and the second is very easy:
$(".go").on('click', function(event) {
event.stopPropagation();
$('body').stop().animate({
scrollTop: $("#myTarget").offset().top }, 500);
});
You also only need to animate the body element (not the html element).
JSFiddle Example
Use a scrolling state, like so :
$(function() {
//global var
isScrolling = false;
$(".go").on('click', function(event) {
event.stopPropagation();
if(!isScrolling) {
isScrolling = true;
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000,
//Only when it's completed (callback)
function() {
isScrolling = false;
}
);
}
});
});
Your problem is that it keeps trying to scroll down even though you are already down.
Related
I've got this code here:
$(document).ready(function()
{
$("#nav_items > p:first-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#main_div').offset().top
}, 500);
});
$("#nav_items > p:last-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#about_us').offset().top
}, 800);
});
});
On element(p) click it scrolls the document to a #main_div or #about_us element. How can I stop it from keep on scrolling if I for example start scrolling with my mouse wheel?
You can listen to the mousewheel event and use the stop method:
$(window).on('mousewheel', function() {
$('body, html').stop();
});
Here is a method, combining the use of $(window).scroll() and $('body').on('mousewheel'), that will demonstrate how to do what you wish:
jsFiddle Demo
var scrollPause = 0;
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
scrollPause = 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300, function(){
setTimeout(function(){
scrollPause = 0;
},5000);
});
e.preventDefault();
});
$('body').on({
'mousewheel': function(e) {
if (scrollPause == 0) return;
e.preventDefault();
e.stopPropagation();
}
})
Notes:
In the jsFiddle, the sp div is used to visually show status of the scrollPause variable
Upon clicking a top menu item, the scrollPause is set to 0 (disallow scroll) and a setTimeout is used to re-enable it after an 8-second pause. Therefore, immediately after the scroll-to-element, mouse wheel scroll will be disabled for 8 seconds.
I'm a jQuery novice. I have two functions on the same page:
one which is a smooth scroll to an ID
the other which shows a "back to top" element after the user scrolls a set distance.
The functions work on their own, but when I combine them as shown below, the "back to top" function doesn't work.
I think I'm missing something obvious and could use some help.
Thanks!
Update: This fiddle shows the problem:
back to top jsfiddle
If the smooth scroll block is disabled, the back to top function works.
jQuery(document).ready(function(){
//smooth scrolling
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
window.location.hash = target;});
});
// Show or hide the back to top footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
});
Hi #DavidCara Just add
<div id="top"></div>
after immediate <body> tag it'll defiantly work.
See updated jsfiddle Here
Use this simple code in html tags directly.
<a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>
in an project I do use mmenu first time. It works as expected but there is one thing I would love to have working, but it still isn't :/
Here's the URL: http://1pager.gut-entwickelt.de/
What I would love to see: After selecting an menu-point, it shouldn't scroll within milliseconds. It should wait till the menu is closed, then start scrolling.
Thatfor I added this script-part:
Me.mobileMenu.mmenu({
zposition: "front",
onClick: {
preventDefault: true,
setSelected : false
}
});
Me.mobileMenu
.find('a')
.on(
'click',
function() {
var href = $(this).attr('href');
if (Me.mobileMenu.hasClass('mm-opened')) {
Me.mobileMenu
.off('closed.mm')
.one(
'closed.mm',
function() {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
return false;
}
);
} else {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
}
return false;
}
);
This seems to work here: http://mmenu.frebsite.nl/examples/responsive/index.html
But on that page it don't... any ideas?
Regards,
Oliver Lippert
The "closed" event is triggered when the menu finished closing, so you shouldn't need an extra timeout.
Have a look at this example, it's a bit more straightforward:
http://mmenu.frebsite.nl/mmenu/demo/onepage.html
Extended to Fred's reply I had another JS-code for doing the scroll. After disabling it, now the menu closes first, and the Scroll starts later.
I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>
I currently am using the following code to auto-scroll to the top on a callback from a swipe detect script. I want to add the ability to cancel the animation when the user clicks the screen during the animation.
$('body,html').animate({
scrollTop: 0
}, 300);
How would I accomplish this cancelation?
Use the stop method to stop the animation. Make sure to pass false for the jumpToEnd parameter so the user isn't automatically taken to the top of the screen.
$(function() {
//Substitute with whatever kicks off this scroll in your app.
$('button').on('click', function(evt) {
$('body,html').animate({
scrollTop: 0
}, 3000);
evt.stopPropagation();
});
$(window).on('click', function(evt) {
$('body,html').stop();
});
});
Live example - http://jsfiddle.net/FcLbH/2/
Edit - Removed the parameters to stop per #AvL's comment.
I am not quite sure about the click-detection, anyhow, this will stop the animation after 3 seconds:
$('body,html').animate({
scrollTop: 0
}, 6000);
setTimeout(function() { $('html,body').stop(); }, 3000);
For all the info on stop(): http://api.jquery.com/stop/
Maybe like this:
$('body,html').animate({
scrollTop: 0
}, 3000).click(function() {
$('body,html').stop();
});
example: http://jsfiddle.net/DJ8Re/1/