Hello So I am using lodash for the first time. My jquery code keeps jumping and I am trying to migrate it in the lodash function but I don't really understand how.
IDK if this matter but the main idea behind the code is for a div to scroll down to a position and snap to place but it keeps jumping. please advise !!
$(window).on('scroll', _.throttle(updatePosition, 100));
$(window).on('scroll', function(){
var scroll = $(window).scrollTop();
var sectionPosTop = document.getElementById('header-bamboo-scroll').getBoundingClientRect();
var headerHeight = document.getElementById('header').getBoundingClientRect();
if (scroll >= 660 && scroll <= 680 ) {
console.log('greater than 660 and less than 680');
$('html, body').animate({
scrollTop: headerHeight.height
}, 500, function() {
$('html, body').stop();
});
}
});
});
I don't understand exactly what you want to do, but you can to use _.throttle to get a delay between code execution and that can give you a smooth animation. You can to adjust the delay time (in milliseconds) to get what you want.
var updatePosition = function() {
var scroll = $(window).scrollTop();
var sectionPosTop = document.getElementById('header-bamboo-scroll').getBoundingClientRect();
var headerHeight = document.getElementById('header').getBoundingClientRect();
if (scroll >= 660 && scroll <= 680 ) {
console.log('greater than 660 and less than 680');
$('html, body').animate({
scrollTop: headerHeight.height
}, 500, function() {
$('html, body').stop();
});
}
}
$(window).on('scroll', _.throttle(updatePosition, 100));
Related
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();
});
})
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);
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
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);
What is the equivalent of this:
$('html, body').animate({
scrollTop: 200
}, 400);
In MooTools or agnostic javascript?
Im going round in circles....
Cheers
This loop can animate the scrollTop property of the window in basic javascript:
window.onload = function() {
var offset = 0; //vertical offset
var interval = setInterval(function() {
window.scrollTo(0, offset);
offset += 4; // plus 4 pixels
if (offset >= 200) {
clearInterval(interval);
}
}, 8); // 200px/4px==50 cycles ; 400ms/50cycles == 8ms per cycle
};
fiddle
Because you asked for a version in mootools, it's just one line:
new Fx.Scroll(window).start(0, 200);
http://jsfiddle.net/ye3vX/
Note: It needs mootools more's Fx.Scroll.