Scroll to Top and Scroll to Bottom in Jquery - javascript

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);
});
});

Related

target.attr is not a function, length undefined jquery onclick

I have these two on click events for two different classes, they have one part of the code that is the same for both of them, so I tried making a function that would contain the part of the code which is the same, and then cal, that function inside onclick, but I keep getting one error.
This is the code that works properly:
$(list).on('click', function() {
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var target = $(this.getAttribute('href'));
if (target.length) {
//prevent default bhebahvior
event.preventDefault();
var topDistance = target.offset().top;
var bottomDistance = documentHeight - topDistance;
if (windowHeight > bottomDistance) {
$(container).css('padding-bottom', topDistance + 'px');
};
var stickyTopHeight = $(list).outerHeight();
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 150
}, 1000);
if($(window).width() <= 769) {
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 100
}, 1000);
}
}
if($(window).width() <= 769) {
if (!$(this).hasClass(list_expanded)) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
} else {
$(this).removeClass(list_expanded);
// $(this).slideUp();
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
}
}
if ($(window).width() > 769) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
}
});
$(link).on('click', function() {
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var target = $(this.getAttribute('href'));
if (target.length) {
//prevent default bhebahvior
event.preventDefault();
var topDistance = target.offset().top;
var bottomDistance = documentHeight - topDistance;
if (windowHeight > bottomDistance) {
$(container).css('padding-bottom', topDistance + 'px');
}
var stickyTopHeight = $(list).outerHeight();
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 150
}, 1000);
if($(window).width() <= 769) {
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 100
}, 1000);
}
}
});
And this is what I tried doing but with zero luck, since I've been getting these errors: Uncaught TypeError: target.attr is not a function
Uncaught TypeError: Cannot read property 'length' of undefined
function doSomething(target) {
target = target || $(this);
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
if (target.attr('href').length) {
//prevent default bhebahvior
event.preventDefault();
var topDistance = target.offset().top;
var bottomDistance = documentHeight - topDistance;
if (windowHeight > bottomDistance) {
$(container).css('padding-bottom', topDistance + 'px');
};
var stickyTopHeight = $(list).outerHeight();
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 150
}, 1000);
if($(window).width() <= 769) {
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 100
}, 1000);
}
}
}
$(list).on('click', function() {
doSomething($(this));
if($(window).width() <= 769) {
if (!$(this).hasClass(list_expanded)) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
} else {
$(this).removeClass(list_expanded);
// $(this).slideUp();
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
}
}
if ($(window).width() > 769) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
}
});
$(link).on('click', doSomething);
I just wanted to try and write these events in a shorter way. Is that possible?
This is probably the one that's failing:
$(link).on('click', doSomething);
The doSomething function expects its one argument to be a jQuery object for a DOM element, but the click event passes the event object, not the element which invoked the event. You can pass the element as a jQuery object the same way you do in your other click handler:
$(link).on('click', function () { doSomething($(this)); });

On scroll the active menu does not chaning

I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO
you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/
I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});

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.

AutoScroll div content both ways

I want to make a div autoscroll it's content. The content height is variable. Here is what I managed to work out, but if I set the height to .childElement.outerHeight or height, it will only scroll 78px, I don't know why.
var element = jQuery('#content');
setInterval(scrollDown(element), 1000)
function scrollDown(element) {
var childElement = element.children();
scrollAmount = childElement.outerHeight();
element.animate({ scrollTop: 1000 }, 3000, null, scrollUp(childElement));
}
function scrollUp(element) {
element.animate({ scrollTop: 0 }, 500);
}
});
Any help is highly appreciated.
Thanks,
Sebastian
I've found the solution.
The main problem is that I used document.ready, and the div's child element did not have all the items in it so the scroll height was not correct. I've changed that with window.load and made some changes to the scroll animation. Also the parameters were wrong on the animate function.
Here is the final, working properly snippet.
jQuery(window).load(function () {
var element = jQuery('#content');
var childElement = element.children();
var scrollAmount = childElement.height();
var speedDown = scrollAmount * 20;
var speedUp = speedDown * 0.3;
scrollDown(element, scrollAmount, speedUp, speedDown);
function scrollDown(element, scrollAmount, speedUp, speedDown) {
element.animate({ scrollTop: scrollAmount }, speedDown, function () {
element.animate({ scrollTop: scrollAmount * -1 }, speedUp);
scrollDown(element, scrollAmount, speedUp, speedDown);
});
}
})
Try this on small, I've had a little line in your code for auto scrollUp and Down non-stop without mouseover timeout stop:
jQuery(window).load(function () {
var element = jQuery('#content');
var childElement = element.children();
var scrollAmount = childElement.height();
var speedDown = scrollAmount * 50;
var speedUp = speedDown * 0.9;
scrollDown(element, scrollAmount, speedUp, speedDown);
function scrollDown(element, scrollAmount, speedUp, speedDown) {
element.animate({ scrollTop: scrollAmount }, speedDown, function () {
element.animate({ scrollTop: scrollAmount * +3 }, speedUp);
scrollDown(element, scrollAmount, speedUp, speedDown);
element.animate({ scrollTop: scrollAmount * -3 }, speedDown);
});
}
})

Categories