I've made this little snippet to scroll the window to the top of the page.
$(window).scroll(function(){
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
However, when the scrollup div fades out after the window scrolls, it fades back in. How do I stop this from happening? Thanks.
I think I have found a reasonable solution
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
Would this be easier than changing my original code?
Check out .stop(): http://api.jquery.com/stop/
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').stop().fadeIn();
} else {
$('.scrollup').stop().fadeOut();
}
});
You should make sure that the scrollup div isn't faded in when you are at the top or when it is already faded in ( visible )
$(window).scroll(function(){
if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
$("#scrollup").fadeIn("slow");
}
});
You could just add an if statement to check if it is at the top:
$(window).scroll(function(){
if($("body").scrollTop()!=0)
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
Related
I'm looking to recreate the scrolling effect on this site: misfitwearables.com. So far, my approach has been to disable user scrolling, but still detect the scroll direction to allow jQuery to control how the page scrolls. The thing is that it works (yay!) .. but it only works on the first scroll. After the first scroll, it stops responding. How can I get it to listen/respond on every scroll?
$(this).bind( 'mousewheel', function ( e ) {
if (e.originalEvent.wheelDelta < 0) {
// scroll down
$("html, body").animate({ scrollTop: (+50) }, 900, "easeInOutQuart" );
} else {
// scroll up
$("html, body").animate({ scrollTop: (-50) }, 900, "easeInOutQuart" );
}
return false;
});
The animating property value is incorrect, should be "+=50" and "-=50":
$(this).bind( 'mousewheel', function ( e ) {
if (e.originalEvent.wheelDelta < 0) {
// scroll down
$("html, body").animate({ scrollTop: "+=50" }, 900, "easeInOutQuart" );
} else {
// scroll up
$("html, body").animate({ scrollTop: "-=50" }, 900, "easeInOutQuart" );
}
return false;
});
It was only working once because you were always passing 50 and -50 as the value.
Here's a working fiddle, I also added a check to perform only one animation per scroll event
I'm trying to scroll the page upon a .click event. Here is what I have so far:
jQuery:
function scrollToStart() {
$("#scrollToStart").click(function() {
$("#startHere").animate({ scrollTop: 0 }, "slow");
return false;
});
}
HTML:
<a href="#startHere" id="scrollToStart">
<img class="img-center" src="images/get-started.png"/>
</a>
When I click, it doesn't do anything. What did I do wrong?
this should work
$("#scrollToStart").click(function (){
$('html, body').animate({
crollTop: $("#startHere").offset().top
}, 2000);
});
a working fiddle
http://jsfiddle.net/tvTUu/
Use
$('html,body').animate({
scrollTop: $("#divToBeScrolledTo").offset().top;
});
with scrollTop: 0 you always scroll to the top of the page.
More information you can find here (With live-Demo):
http://css-tricks.com/snippets/jquery/smooth-scrolling/
$(function(){// when dom loaded
$("#scrollToStart").click(function (){
$(document.body).animate({
scrollTop: 0
});
});
});
I works for me.
If I understood the question properly, you need to scroll your page to the top position on the click event, with an animation effect. I did something similar not long ago, here is the JavaScript code.
innerAnimationStep = 25;
innerScrollStep = 1;
function scrollTopAnimated(scrollStep, animationStep)
{
try
{
innerScrollStep = scrollStep;
innerAnimationStep = animationStep;
scrollTopAnimationStep();
}
catch(e)
{
console.log(e.message);
}
}
function scrollTopAnimationStep()
{
try
{
var jDocument = $(document);
if(jDocument.scrollTop() > 0)
{
jDocument.scrollTop( jDocument.scrollTop() - innerScrollStep );
setTimeout(scrollTopAnimationStep, innerAnimationStep);
}
}
catch(e)
{
console.log(e.message);
}
}
Just call scrollTopAnimated to get the page scroll with animated effect. I hope it can help.
$("#scrollToStart").bind('click',function() {
$('body , html').animate(
{
scrollTop : $("#startHere").offset().top
} , 2000 ) ;
});
http://justprogrammer.com/2013/06/21/scroll-to-specifically-element-in-browser/
http://justprogrammer.com/2013/06/25/jquery-basic-concepts/
$( document ).ready(function(){
$("#scrollToStart").click(function() {
$("#startHere").animate({ scrollTop: 0 }, "slow");
return false;
});});
I'm trying to get the window to scroll through a sequence of divs. Here is my code, but it is quite targeted, and won't work for more than one div.
$('.down_arrow').click(function(e){
$('html, body')
.animate({scrollTop:$('.two')
.offset()
.top }, 'slow');
});
JSFIDDLE
Is there a way I can then go through each $('.container') on each $('.arrow_down') click?
$('.down_arrow').click(function(e){
$('html, body')
.animate(
{
scrollTop:$(this).closest('.container').next().offset().top
}, 'slow');
});
jsFiddle
$('.down_arrow').click(function(e) {
var next_container = $(this).parents(".container").next(".container");
$('html, body')
.animate({ scrollTop:next_container.offset().top }, 'slow');
});
JSFiddle
You should save the last scrolled container, and scroll to the next one.
Something like this:
var currentContainerIndex = 0;
$('.down_arrow').click(function(e){
var currentContainer = $($('.container')[currentContainerIndex]);
if (!currentContainer.size()) {
currentContainerIndex = 0;
currentContainer = $($('.container')[currentContainerIndex]);
}
$('html, body').animate({scrollTop:currentContainer.offset().top }, 'slow');
currentContainerIndex++;
});
I have a website with 100% height that has a hidden footer, that needs to slide up and show it when a button is clicked, and when that button is clicked again, it should slide down and hide it.
The problem is that the sliding animation is only working when the footer slides up, and when it should slide down, it bumps without animation.
You can see the problem right here, by clicking on the "More" button in the footer.
The JS code used to manipulate that button is the following:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
Thanks in advance!
Update: I just tried this code:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
And aparently there's an animation going on the footer that I didn't know exist. Maybe that's the cause of this problem?
alright so i gave this a shot:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
demonstration at http://jsfiddle.net/DPq5Z/
same result, another way (using absolute positioning in order to keep elements above undisturbed):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
demonstration at http://jsfiddle.net/9R6L4/
It works as how default animations in jQuery work. If you want to customize this. You need to use jQuery easing plugin. It takes as parameter the easing effect, like easeIn, easeOut, Bounce etc.. that controls the flow. By default it is linear and that is what you see.
Easing Plugin: https://github.com/gdsmith/jquery.easing
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").fadeToggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
jsFiddle: http://jsfiddle.net/vvmYH/4/
I have the following code:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 900);
return false;
});
});
When you click on back to top it work's fine in IE6 - but when the fadeIn and fadeOut 'back to top' doesn't seem to work in IE6.
Try this
$(window).scrollTop() is the one that worked for me in all the current browsers
or
window.scroll(x, y);