I have 2 containers whose widths change. Inside them, I have clickable elements. When a container is clicked, it resizes in an animation. I want to make it so that when a clickable element is clicked, its container resizes and scrolls to the clicked element. Here's a fiddle that shows this: http://jsfiddle.net/w7H3M/1/
However, it scrolls to the wrong position because of the resizing. Here's the event handler for the click:
<div id=left>...</div>
<div id=right>...</div>
$('#left').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width()
}, 800);
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
$('#right').on('click', 'a', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800);
$('body').animate({
scrollTop: node.offset().top
}, 800);
});
Effectively, it does not work correctly because of the animation. The offset of the node you want to show at the top of the screen will change when the div expands. To achieve what you want, you need to set the scrollTop property when the animation completes. You can achieve this using the complete handler of jQuery.animate(). I've forked your jsfiddle to show you it. The only problem is that the two animationw now play one after the other instead of simultaneously.
$(document).ready(function () {
// generate content
var str = '';
for (i = 1; i < 100; i++) {
str += '<p>' + x100(i) + '</p>';
}
$('#left').html(str);
$('#right').html(str);
// end generate content
$('#left').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.75 * $(document).width(),
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
$('#right').animate({
width: 0.25 * $(document).width()
}, 800);
});
$('#right').on('click', 'p', function () {
var node = $(this);
$('#left').animate({
width: 0.25 * $(document).width()
}, 800);
$('#right').animate({
width: 0.75 * $(document).width()
}, 800, 'swing', function() {
$('body, html').animate({scrollTop: node.offset().top}, 800);
});
});
});
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 scroll my homepage back up if the logo in my menu is clicked. I also have a listener on $(window).scroll() which animates an object out of the screen with a negative margin.
My problem is that this event gets triggered with the animation (animate scrollTop).
This shouldn't occur because I have a boolean variable which has to be true to do this, I only set this on true AFTER the scroll animation using a combination of .promise() and .done().
This is my JavaScript:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500).promise().done(resetFirstScroll());
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
A solution would be to give the function a setTimeout of 50 milliseconds, but I'd rather do it correctly after the animation is completed.
Using the standard callback gives the same output:
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
resetFirstScroll();
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
For those who want the "hacky" solution:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
setTimeout( resetFirstScroll, 50 );
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent.
From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = jQuery(document).height();
var documentHeight = $(document).height();
var scroll = $(window).scrollTop();
alert(scroll);
var scrollAmount = Math.round((height) * percentageToScroll/ 100)-scroll;
//alert(point);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
Here is the fiddle.
For Example:
percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top)
For top to bottom is 100 then it completely scroll to bottom of the page.
I am not sure how to make it workable.
Thanks.
Vicky
What about this?
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
$('#spnbottom').on("click",function() {
var percentageToScroll = 100;
var height = $(document).innerHeight();
var scrollAmount = height * percentageToScroll/ 100;
alert(scrollAmount);
var overheight = jQuery(document).height() - jQuery(window).height();
//alert(overheight);
jQuery("html, body").animate({scrollTop: scrollAmount}, 900);
});
Fiddle here
As I specified in comment I prepared a Demo
$(document).on("click","#spnTop",function(){
$('html,body').animate({scrollTop: 0}, 1500);
});
$(document).on("click","#spnbottom",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate({ scrollTop: window_height + document_height },1500);
});
I hope it may help you
jQuery(document).ready(function($){
$('#goToTop').on("click",function(){
$("html, body").animate({ scrollTop: 0 }, 2000);
return false;
});
$('#goToBottom').on("click",function() {
$("html, body").animate({scrollTop: $(document).innerHeight()}, 2000);
return false;
});
});
Now see you need the percentages
See demo here:
http://jsfiddle.net/a3g4d/
$('#spnTop').on("click",function(){
var percentage = 100;
var height = $(document).height();
var remove = +height / +100 * +percentage;
var spaceFromTop = +height - +remove;
$('html,body').animate({ scrollTop: spaceFromTop }, 'slow', function () {});
});
You can also use the span positions if you have top and bottom span always.
$('#spnTop').on("click",function(){
$('html,body').animate({
scrollTop: $("#spnbottom").offset().top
}, 'slow', function () {
alert("reached top");
});
});
http://jsfiddle.net/4qLvC/8/
I hope something like this :) might help you
$('#spnTop').on("click",function(){
$('html,body').animate(
{ scrollTop: 0 },
'slow',
function () {});
});
$('#spnbottom').on("click",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate(
{ scrollTop: window_height + document_height },
'slow',
function () {});
});
Use this link to try it out : demo
$(function () {
$("#scrollToBottom").click(function () {
$('html, body').animate({ scrollTop: window.screen.height }, 400);
});
$("#scrollToTop").click(function () {
$('html, body').animate({ scrollTop: 0 }, 400);
});
});
I have the following function set to run on a hover over an image:
function() {
$('.slides .slide h3').each(function(i){
var owidth = $(this).width()
$(this).animate({"right":730 - owidth - 16}, 500);
});
}
You can view the page here. Over the image and click the next icon on the lower right of the image. For some reason, the function is calculating the first h3's width correctly, but then it thinks all other h3s have a width of 0. Can anyone offer a solution?
function() {
var owidth = 0;
$('.slides .slide h3').each(function(i){
owidth = $(this).width();
$(this).animate({"right":(730 - owidth - 16) + 'px'}, 500);
});
}
A better way:
function() {
$('.slides .slide h3').each(function(i){
$(this).stop().animate({
"right": (714 - $(this).width()) + 'px'
}, 500);
});
}