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即可。