當前位置：
首頁 >
jquery返回顶部
發布時間：2025/4/16
30
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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); });} });
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即可。總結
以上是生活随笔為你收集整理的jquery返回顶部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页中返回顶部代码(多种方法)另附注释说
- 下一篇： 教你网站怎么添加返回顶部代码?