Execute scrollTop animation on $(window).scroll with jquery - javascript

I am trying to move the slide once every time that I make scroll in the page. But scroll event doesn't stop and repeat the event. How can I make an animation to move to the next slide color with scrollTop inside $(window).scroll just once for every time? See my Fiddle
And this is the piece of code which doesn't work :(
$('html, body').animate({
scrollTop: ($(next).offset().top)
},500);
My target is something like that http://www.sincedilla.com/

this is probably what you need.
The scroll event ve to be prevented until the animation is finished ,
docs for animation http://api.jquery.com/animate/ read the callback section
$(this).bind('mousewheel', function (e) {
if (!animating) {
animating = true;
if (e.originalEvent.wheelDelta < 0) {
next = $(first).next();
first = $(next);
// scroll down
$("html, body").animate({
scrollTop: ($(next).offset().top)
}, 900, function(){
animating = false;
});
} else {
first = $(next).prev();
next = $(first);
// scroll up
$("html, body").animate({
scrollTop: ($(first).offset().top)
}, 900,function(){
animating = false;
});
}
}
return false;
});
working fiddle http://jsfiddle.net/fdbh0no8/

Related

jQuery - hiding page, scrolling with .animate, then showing the page through .animate's complete function now working

For the site I'm working on I want people to be able to click on a topic, go to that page, then have a button at the bottom of that page which will take them back to where they were browsing before.
The below script did work for that:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100)
}, 0);
}
else {
$('html, body').show();
}
});
However, it's not the nicest UX. When it loads in it either jumps uncomfortably fast to the place I'm trying to get them to or you have to watch it scroll slowly which isn't fun either.
I do have to make it scroll because otherwise it breaks other animations on the page, so I thought I would just hide the entire thing while it's scrolling, then show it or fade it in when it's done.
I wrote the below to do that, and it does hide it, it does show it, and the console log triggers... But it no longer scrolls down to where I want it go.
Any help?
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100, function() {
$('html, body').show();
console.log("JHjlkjl");
})
}, 0);
}
else {
$('html, body').show();
}
});

jQuery scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.
Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});
You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO
No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

waypoint js click to next div

Working on a function with waypoint.js that takes the current div in the viewport and finds the next div when clicking a button.
Currently I’m getting a undefined value for the ‘next’. Not sure what could be wrong I guess the value can’t move from the waypoint function to the click function. Any help would be lovely.
$('.wrap').waypoint(function() {
var next = $(this).next();
$(".button").click(function() {
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
});
i suggest you to chain it instead of doing this in the callback:
$('.wrap').waypoint().addBack(this).find(".button").click(function() {
var next = $(this).closest('.wrap').next();
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
or could be something like this:
$('.wrap').waypoint().done(function(){
$(this).find(".button").click(function() {
var next = $(this).closest('.wrap').next();
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
});

Animate scrollTop on scroll event

I have a custom slider. And I want to do a such thing. When user scrolls down it should animate scroll down to next slide, and during this animation user should not be able to scroll. But I have a problem. Scroll event is fired multiple times, and after one animation is done, second one is started, and etc.
Here is my code sample
$(window).scroll(function(e){
if($scrolling){
e.preventDefault();
e.stopPropagation();
}
})
$(window).on('mousewheel', function(event){
$scrolling = true
$('html, body').animate({scrollTop: 'my position here' }, {done: function(){ $scrolling = false; } }, 1000)
});
What I am doing wrong? Thanks in advance!
You can control everything from the mousewheel event alone..
var $scrolling = false;
$(window).on('mousewheel', function(event){
if (!$scrolling){
$scrolling = true;
$('html, body').animate({scrollTop: 'my position here' }, {done: function(){ $scrolling = false; } }, 1000);
}
});

click the ''Back to Top" button (scrollTop) multiple times issue

I have noticed that if i click the ''Back to Top" button multiple times and then you try to scroll down it causes the window to keep scrolling back to the top. Any idea how to stop this happening anyone?
my code is:
Scroll
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
$("html, body").stop();
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$.clicked = false;
if ($.clicked == false){
$('.scrollup').click(function(){
$.clicked = true;
$("html, body").stop().animate({ scrollTop: 0 }, 600);
return false;
});
}
});
</script>
As you said you click multiple time so event will be fired mulitple times so you need to stop animation function,
So edit your code as below,
$("html, body").stop().animate(
--------------^^^^^^^^----
OR edit code for scroll
$(window).scroll(function(){
$("html, body").stop();
$(function() {
$('button').hide();
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop: 0 // Scroll to top of body
}, 500);
});
});
This should work.
I had a similiar issue.
I just solved it with a simple check:
$('.scrollup').click(function(){
if ($(document).scrollTop() != 0) {
$("html, body").animate({ scrollTop: 0 }, 600);
}
return false;
});
The problem, as already mentioned, is the click event firing multiple times. Because handling the event itself didn't work for me, I just tried to check if the current scroll value/position is already where I want it to be, et voilà: The weird behaviour vanished! :)

Categories

Resources