How to stop scroll during the click event in Jquery - javascript

I have used more effects.The effects likes based on the drag the scroll in browser or going to down of the page in my home page.
I have implemented the top button, it can goes top of the page. When i click the top button. It's go to top, but very slow ie, step by step moves to top, because of the existing effects.
Top button coding:
jQuery('#to-top').click(function (e) {
e.preventDefault();
jQuery('html,body').animate({scrollTop: 0}, 800);
});
How to stop all other effects(scroll based effects) and allow the #top-top button scroll only?
Make sure once moved to top, the scroll based effects will work..

You have to add stop() to your function call
jQuery('#to-top').click(function (e) {
e.preventDefault();
jQuery('html,body').stop()animate({scrollTop: 0}, 800);
});
then to continue the scroll effect you will have to recall it, I'm not sure how do you habdle this

You just have to stop current animations using JQuery stop() method (read more here) so your code should look like:
jQuery('#to-top').click(function (e) {
e.preventDefault();
jQuery('html,body').stop().animate({scrollTop: 0}, 800);
});

Related

Trigger 2 events on href? Scroll to top, then load

I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it

JS: preventDefault for User Scrolling? Or force GSAP scrolling over user?

I'm working on a slideshow area. I want to make it so scrolling horizontally will trigger an animation which moves the scrollable area to the next "slide."
Everything is working, but only if I scroll just a tiny bit. If I scroll more, the GSAP scrolling animation fails silently.
There are two ways that would make sense for this to be solved which I can think of:
1 > The first would be cancelling the scroll behavior, something like this:
$viewing_area.scroll( function(event) {
if(animationIsInProgress) {
event.preventDefault();
}
}
But this way is likely to stop GSAP scrolling as well. There is no way to distinguish if the scrolling is due to GSAP or the user that I know of.
2 > The second way would be to have GSAP force it's scrolling over anything the user is doing:
TweenLite.to($viewing_area, time, {
scrollTo: { x: slide_stops[nextTarget] },
ease: Power4.easeInOut,
onComplete: function() {
console.log('scrolling completed');
animationIsInProgress = false;
}
//Some option for forcing the behavior over user scrolling
});
Are either of these things achievable, or is scrolling by it's nature, unstoppable?
It ends up, GSAP scroll to plugin has a setting for this:
http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/
It is called autokill, and if it is set to false, user scrolling will not interrupt the tween.
TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});

jQuery - scroll or jump to top

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);
});
});

Stop animation if page is already at destination

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/

How to make carousel smooth scroll to top when next slide and use 'hand carousel'

I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);

Categories

Resources