jquery - retour au début

Je vois ce violon échantillon ici

Je veux quand "vers le haut" apparaît, cliquez sur! défiler vers le haut en douceur ou lent

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});

source d'informationauteur jhunlio

  1. 34
    $("#toTop").click(function () {
   //1 second of animation time
   //html works for FFX but not Chrome
   //body works for Chrome but not FFX
   //This strange selector seems to work universally
   $("html, body").animate({scrollTop: 0}, 1000);
});

    http://jsfiddle.net/fjXSq/161/

  2. 9

    Mise à jour JSFiddle avec la solution

    $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});

$("#toTop").click(function() {
    $("html, body").animate({scrollTop: 0}, 1000);
 });
  3. 1

    D'abord, permet de créer le bouton.

    <a href="#" class="scrollToTop">Scroll To Top</a>

    Maintenant, nous pouvons le style le bouton avec le code CSS suivant.

    <style>
.scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    top:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}
</style>

    Copiez et collez le code suivant dans le fichier Javascript pour ajouter la fonctionnalité Javascript.

    <script>
$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});
</script>
  4. 0
    $(document).ready(function(){ 
   $(window).scroll(function(){ 
       if ($(this).scrollTop() > 100) { 
           $('#toTop').fadeIn(); 
       } else { 
           $('#toTop').fadeOut(); 
       } 
   }); 
   $('#toTop').click(function(){ 
       $("html, body").animate({ scrollTop: 0 }, 600); 
       return false; 
   }); 
});

    Démonstration en direct, plein de script et tutoriel peut être vérifier à partir d'ici - Retour au haut de la touche à l'aide de jQuery et CSS

  5. 0

    Voir JS Fiddle

           $(window).on("scroll",function() {
        if ($(this).scrollTop() > 50 ) {
            $('#toTop').fadeIn(400);
        } else {
            $('#toTop').fadeOut(400);
        }
    });

    $("#toTop").on("click",function() {
        $("html, body").animate({scrollTop: 0}, 1200);
     });