天天看點

jquery傳回頂部

Jquery傳回頂部插件使用簡單,步驟如下:

1、引用插件js和css檔案

2、設定預設參數(showHeight :設定滾動高度時顯示、speed :傳回頂部的速度以毫秒為機關)

$(function() {
    $.fn.manhuatoTop = function(options) {
        var defaults = {           
            showHeight : 150,
            speed : 1000
        };
        var options = $.extend(defaults,options);
        $("body").prepend("<div id='totop'><a>傳回</a></div>");
        var $toTop = $(this);
        var $top = $("#totop");
        var $ta = $("#totop a");
        $toTop.scroll(function(){
            var scrolltop=$(this).scrollTop();     
            if(scrolltop>=options.showHeight){              
                $top.show();
            }
            else{
                $top.hide();
            }
        });
        $ta.hover(function(){      
            $(this).addClass("cur");   
        },function(){          
            $(this).removeClass("cur");    
        });
        $top.click(function(){
            $("html,body").animate({scrollTop: 0}, options.speed); 
        });
    }
});
           

如果隻是要實作比較簡單的跳轉效果的話,可以單獨用

$("html,body").animate({scrollTop: 0}, options.speed); 
           

這麼一句,将其中的options.speed改為自己需要的時間即可,機關是毫秒,一般改成250到300即可。