We Keep Coding

How can I control the mouse scroll event and after that do an animation on the html, body?

I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
´´´

I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});

Scroll a specific element inside container using JS or jQuery

I have huge sidebar element and when the page is scrolled sidebar point to the current element that is in a viewport. But sometimes active element is out of sidebar visible space i.e below or above borders. And then the user needs to scroll manually to be able to see active element.
I want to try use logic for determining if the active element is out sidebar visible space and auto scroll if needed.
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var container = $('#sectionMenu');
var containerHeight = container.height();
$(data).each(function () {
var topDistance = $(this).offset().top - 250;
var id = $(this).attr('id');
var elem = $('#_' + id);
if ((topDistance) < scrollTop && (topDistance + $(this).height() * 0.95) > scrollTop) {
if (autoScrollFlag) {
if (!elem.hasClass('sideBarActive')) {
var scrollPosition = elem.offset().top - container.offset().top;
removeActiveMenuItems(data);
elem.addClass('sideBarActive');
if (containerHeight < scrollPosition) {
// TODO automated scroll
}
}
}
autoScrollFlag = 1;
}
});
});

The solution that has worked for me was like this.
if (containerHeight < scrollPosition) {
container.animate({
scrollTop: '+=100px'
}, 800);
}

Weird behavoir of scrolling function

What I want to achieve is a simple scroll to function, which always will scroll to same point regarding scrollTop position.
I thought using window.scroll will be a good approach here, cause I am able to read current scrollTop value, as I sad it's not workin, on some browsers I am not able to scroll(IE), on others (Chrome, Firefox) after clicking tag connected to this func. I got auto scroll behaviour, a little bit up and then a little bit down.
I don't want to use scrollTo plugin or others cause it's the only place on my page with such funcionality.
$(window).scroll(function () {
var y = $(window).scrollTop();
console.log(y);
var mainBanner = $('header').height();
if (y > 1 && y < mainBanner) {
$('#slideUpHead').click(function(){
$("html, body").animate({ scrollTop: mainBanner - y}, 600);
});
}
else if(y < 1){
$('#slideUpHead').click(function(){
$("html, body").animate({ scrollTop: y + mainBanner}, 600);
});
}
else {
}
});
here's my second approach, partially working:
myScroll = function (){
var mainBannerH = $('header').height();
var y = $(window).scrollTop();
if (y > 1 && y < mainBannerH) {
$("html, body").animate({ scrollTop: mainBannerH - y}, 600);
}
else if(y < 1){
$("html, body").animate({ scrollTop: y + mainBannerH}, 600);
}
else {
console.log("It's not working properly");
}
};
$('#slideUpHead').click(myScroll);

For the time being the following solution works just fine, thanks to Ahmad I have changed my approach and get scrollTop position a little bit differently, not 100% sure why but it works.
myScrollTo = function (){
var mainBannerH = $('header').height();
var myPos = $('html,body').scrollTop();
if ( myPos > 1 && myPos < mainBannerH) {
$("html, body").animate({ scrollTop: mainBannerH - myPos}, 600);
}
else if(myPos < 1){
$("html, body").animate({ scrollTop: myPos + mainBannerH}, 600);
}
else {
console.log("It's not working properly");
}
};
$('#slideUpHead').click(myScrollTo);

Javascript scroll to element on scroll

I searched very long but haven't found a soulution yet.
I want to scroll to the next element on scroll.
$(window).load(function(){
var scroll = false;
$(function() {
//Create an Array
var sites = $('.site');
var position = 0; //Start Position
var next = $('#next');
var lastScrollTop = 0;
$(window).scroll(function(event){
if(scroll == false){
scroll = true;
$(document).off('scroll');
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (position !== sites.length - 1) {
scrollToPosition(sites[position += 1]),5000;
}
} else {
if (position !== 0) {
scrollToPosition(sites[position -= 1]),5000;
}
}
lastScrollTop = st;
}
});
})
function scrollToPosition(element) {
if (element !== undefined) {
scrollToElement($(element).attr('id'));
}
}
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 500;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
selector = "#" + selector;
var element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
scroll = false;
}
});
the html has many of these with different ids
<div id="test" style="width:100%; height:100vh;" class="site">
</div>
So the containers are fullscreen hight. and when the user scrolls a bit he should get to the next container.
At the moment it scrolls till the end and or more.

It would help if you could create an example in jsFiddle or CodePen, but the first thing I would do is stop any current jQuery animations before launching new ones:
$('html, body').stop().animate({
scrollTop: offsetTop
}, time);
You should keep in mind that scroll handler is executed many times when user is scrolling.
Also, unrelated - your scrollToPosition calls have brackets at the wrong place and should probably be like this:
scrollToPosition(sites[position += 1], 5000);
Edit:
Another thing that might cause problems - you should unset the 'scroll' flag/variable only when the animation has finished, something like this:
$('html, body').stop().animate({
scrollTop: offsetTop
}, time, function () {
scroll = false;
});

How to scroll the window automatically when mouse moves bottom of the page using jquery

I have 50 divs,But in my window it shows only 25,I do drag and drop activity on these divs.So If i drag my first div near 25th div,It should scroll automatically to show the remaining divs.How do i do this in jquery? any idea?
I am using Nestable not draggable()

This will need some fine tuning depending on your specific use case but it seems to work fairly well.
Working Example
$('.dd').nestable({ /* config options */
});
$(window).mousemove(function (e) {
var x = $(window).innerHeight() - 50,
y = $(window).scrollTop() + 50;
if ($('.dd-dragel').offset().top > x) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 600);
}
if ($('.dd-dragel').offset().top < y) {
//Up
$('html, body').animate({
scrollTop: 0
}, 600);
} else {
$('html, body').animate({
});
}
});
Related API documentation:
.mousemove()
.innerHeight()
.scrollTop()
.offset()
.animate()

If you want to know bottom of window you can check
$(window).height()
and $(window).scrollTop();

I know this is an old topic but since this feature keeps in standby, I just improved apaul34208's code, hope it helps
$(window).mousemove(function (e) {
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - 50,
top = 50;
if (e.clientY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - 100)) {
$('html, body').animate({
scrollTop: $(window).scrollTop() + 300
}, 600);
}
else if (e.clientY < top && $(window).scrollTop() > 0) {
$('html, body').animate({
scrollTop: $(window).scrollTop() - 300
}, 600);
} else {
$('html, body').finish();
}
}
});

A bit of an improvement on Mencey's code. A caveat it might have is that it's based on an interval fired every 16 milliseconds instead of mousemove(). I don't know how taxing this may be, so feel free to increase the number of milliseconds or fire a clearInterval at some point. The benefit from this is the scrolling is continuous, instead of having to wiggle the mouse as 1j01 pointed out.
You may also change the speed and zone variables, zone being an area in pixels at the top and the bottom of the window where you can drag the item. As you get closer to the top or the bottom of the window, the scrolling speed goes up as it compares the distance between the position of the mouse and the actual edge of the window, giving some control to the user on the scrolling speed.
var mouseY;
var speed = 0.15;
var zone = 50;
$(document).mousemove(function(e){
mouseY = e.pageY - $(window).scrollTop();
}).mouseover();
var dragInterval = setInterval(function(){
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - zone;
if (mouseY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - zone)) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ((mouseY + zone - $(window).height()) * speed)},0);
}
else if (mouseY < zone && $(window).scrollTop() > 0) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ( (mouseY - zone) * speed) },0);
} else {
$('html, body').finish();
}
}
},16);