We Keep Coding

JS Scroll window while mouseover

I would like to scroll up or down the window while the mouse is over a specific element.
What I have so far basically works but it's not "smooth". It starts and stops on and on, not looking nice. Do you have any idea how to make a more constant smooth scrolling?
This is my code:
doScroll = 0;
$(".helperDown").mouseenter(function() {
scrollHandler = setInterval( function() {
console.log('scrolling down...');
if(doScroll == 0) {
doScroll = 1;
$("html, body").animate({scrollTop: fromTop+50}, 200, 'linear', function() {
doScroll = 0;
});
}
}, 200);
});
$(".helperDown").mouseleave(function() {
clearInterval(scrollHandler);
});
.helperDown is the area where the mouse has to be in to start scrolling. fromTop is always recalculated after a scroll event.

You can not start a series of animation and expect a smooth scrolling. What you need is to start one animation only by pre-calculating the distance this animation will cover. Also, jQuery has a nice wrapper for mouseenter and mouseleave -combined. It's the hover() function with two functions as its parameter. The following code block will solve your issue.
Also, this plnkr has both the up and down scroll feature:
https://plnkr.co/edit/WoneJ8?p=preview
$(function () {
// change this value as per your need
var distancePerSec = 1000;
$(".helperDown").hover(function () {
var h = $("body").height();
var targetScrollTop = h - $(window).height();
var distanceToTravel = targetScrollTop - $(window).scrollTop();
var animationDuration = (distanceToTravel / distancePerSec) * 1000;
$("html, body").animate({
scrollTop: targetScrollTop
}, animationDuration, 'linear');
}, function () {
// stop the animation
$("html, body").stop();
});
})

How to make slow the Scroll-Top Speed

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?

use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question

Only with CSS:
html {
scroll-behavior: smooth;
}

Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/

Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

How to scroll once in $(window).scroll() have another scroll command

I have a vertical photo viewer
and i need a scroll effect is once a page height when mouse wheel down.
so i have following code
$(document).ready(function() {
$(window).scroll(function () {
var H = $(window).height();
var st = $(this).scrollTop();
$("html, body").animate({ scrollTop: H + st }, 500, function () {
console.log("finish scroll");
});
});
});
But when i scroll once, it will repeat again and again until to the bottom.
How can i solve this problem?
Thanks in advance.

I used a counter and a timer so that the counter waits half a second after the scroll has finished..
http://jsfiddle.net/beardedSi/p45rH/1/
$(document).ready(function () {
var H = $(window).height(),
go = true;
console.log(H);
//just for visual, set the height of boxes to be same as window height
//to check it is all working
$('.box').css('height', H + "px");
function scroller() {
$("html, body").animate({
scrollTop: '+=' + H
}, 400, function () {
console.log("finished");
setTimeout(function () {
go = true;
}, 400);
});
}
$(document).on('scroll', function (e) {
e.preventDefault();
if (go) {
go = false;
scroller();
}
});
});

The problem is the animation make a scroll event too. so you have a scrolling loop.
To resolve that, you can add a flag.
It's not the best way to solve your problem but you can do this => http://jsbin.com/qagayopu/2/edit

Firing an animation when aligned

I am creating a splitscrolling website and it's working great. But i have one problem, when the user stops scrolling it fires a function called alignWhenIdle and what this does is align the columns so they become "one".
Now that is working nicely but i can't seem to target a specific part of the column that aligns. let's say when the number 2 column aligns ( see image ) i want to be able to fire an animation. I tried using a callback but that fires a function every time the columns are aligned.
This is my JS:
(function ($) {
var top = 0;
var contentHeight, contents, totalHeight;
var locked = false;
var timeout;
var align = function () {
var pos = (top + $(window).scrollTop());
var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
var multiplier = snapUp
? Math.ceil(pos / contentHeight)
: Math.floor(pos / contentHeight);
var newTop = contentHeight * multiplier;
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
locked = false;
};
var reset = function () {
contentHeight = $('.right').height();
contents = $('.right > .content').length;
totalHeight = contentHeight * (contents - 1);
top = (0 - totalHeight);
};
var scrollRight = function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
};
var alignWhenIdle = function (delay) {
clearTimeout(timeout);
timeout = setTimeout(align, delay);
};
$(document).on('ready', function () {
reset();
scrollRight();
});
$(window).on('scroll', function () {
locked = true;
scrollRight();
});
$(window).on('mouseup', function (e) {
if (locked) {
align();
}
});
$(window).resize(function () {
locked = true;
reset();
scrollRight();
alignWhenIdle(300);
});
$(window).on('mousewheel', function (e) {
alignWhenIdle(300);
});
$(window).on("keyup", function (e) {
alignWhenIdle(300);
});
})(jQuery);
http://jsfiddle.net/ev3B8/
Any help is much appreciated,
Cheers

See http://jsfiddle.net/5T9Y8/
Scroll till the column 2 and see result...
In the method align I've added a callback:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
$(".animate").animate({ marginLeft: "200px" },300);
});
Works well, did you need exactly that?
EDIT
You should just check for some condition.
E.g. based on this solution Check if element is visible after scrolling you can build this:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300);
});
See updated solution here http://jsfiddle.net/5T9Y8/1/
This is only one way, I'm really sure there is a way to do it even better. E.g. you can calculate the current elements which are shown and then just find the things only inside of them.

I tried using a callback but that fires a function every time the columns are aligned.
Use one method for functioning only once instead of on.

Delay mousewheel function

I'm using the mousewheel and waypoints plugin to scroll sections of my page; The problem I am having is when I scroll using the apple mighty mouse the scrolling is too sensitive and the function gets triggered more then once when the animation is complete. I tried to set a timeout function and variable to check if the animation is complete but neither of these worked.
I would like to replicate an effect similar to the one on this website.
JQUERY
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
clearTimeout(interval);
console.log('test');
$('section').waypoint(function(direction){
thisID = $(this);
},{ offset: '350' });
indexPos = thisID.index('section');
if (completed == true) {
completed = false;
var interval = "";
if (delta > 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
//$(this).animate(function(){
$('html, body').stop().animate({
scrollTop: thisID.prev().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
//});
}else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
else if (delta < 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
$('html, body').stop().animate({
scrollTop: thisID.next().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
};
return false; // prevent default
});

I don't know what this is doing: indexPos = thisID.index('section'); but before doing anything, I would check if ins't anything in progress already:
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
if($('html').is(':animated') || $('body').is(':animated')) return false;
// else, do your stuff...
});

You can use underscore js http://underscorejs.org/
and do something like this:
$('body').mousewheel(_.debounce(function() {
//handle the mouse wheel event in here
}, 30)
This will wait for 30 ms from the last mousewheel event before firing the callback

This website doesn't seem to use scrolling. It merely moves to a new anchor (watch the url when scrolling) which is triggered by moving (scrolling) your mouse up or down as a trigger which feels like lagged scrolling (but in fact, you don't have any control over the direction once it moves). You can use jquery animate to do that.