jQuery rendre div glisser lors du défilement en bas de page

Je veux faire une div glisser sur ma page de droite lorsqu'un utilisateur fait défiler la page (div contiendra un lien qui mène vers le haut de la page). Voici le code que j'utilise actuellement:

jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 100) {
    jQuery('.totop').animate({ right: '0px' });
} else {
    jQuery('.totop').animate({ right: '-300px' });
}
});

Et le CSS:

.totop {
position:fixed;
bottom:50%;
right:-300px;
width:300px;
height:100px;
font-size:30px;
color:white;
background:#f18500;
}

La Div se comporte très bizarrement, quand je scroll vers le bas de la div prend environ 5 secondes, puis il s'en vue, mais regarde comme il fait plusieurs tentatives pour se glisser à nouveau avant de reste encore, quand je glisse à nouveau vers le haut, il disparaît...mais après environ 5 secondes. Aimerais de l'aide pour savoir quel est le problème avec mon code s'il vous plaît.

lire cet article pour créer un défilement vers le haut de la page: recentsolutions.net/web-development/smooth-scroll

OriginalL'auteur Sam Skirrow | 2013-02-22

  1. 12

    Vos animations se sont mis en file d'attente, utilisez .stop():

    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 100) {
        if (jQuery('.totop').hasClass('visible') == false) {
            jQuery('.totop').stop().animate({
                right: '0px'
            }, function () {
                jQuery('.totop').addClass('visible')
            });
        }
    } else {
        if (jQuery('.totop').hasClass('visible') == true) {
            jQuery('.totop').stop().animate({
                right: '-300px'
            }, function () {
                jQuery('.totop').removeClass('visible')
            });
        }
    }
});

    DÉMO: http://jsfiddle.net/MkJwm/

    Parfait, merci
    Pas un problème. Prière d'indiquer que cette réponse est correcte.
    Il n'était pas assez bon, j'ai mis à jour ma réponse. Une fois la diapositive a été visible et vous continuez à faire défiler vers le bas, l'animation a commencé à nouveau. Maintenant, il est indiqué qu'une seule fois.

    OriginalL'auteur iappwebdev

  2. 0

    Quelque chose comme ceci:

    $(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
        $('#div-to-show').slideDown('slow');
    } else {
        $('#div-to-show').slideUp('slow');
    }
});

    Pas testé.

    Ce n'est pas la question au sujet de glisser vers le haut/vers le bas!
    Cela ne fonctionne pas pour moi avec le bootstrap de toute façon parce que la barre de navigation juste disparaît très rapidement et s'affiche n'importe quelle vitesse je l'ai mis au. Je pense que la cohérence de mouvement de l'écran de questions.

    OriginalL'auteur 0_0