怎样制作超过一屏才显示的jquery返回顶部按钮

 时间:2026-04-30 05:05:03

1、找到或制作一张返回顶部的图片,可以使用百度图片查找返回顶部按钮。

怎样制作超过一屏才显示的jquery返回顶部按钮

2、找到并引用jq文件,确保路径正确

<script language="javascript" type="text/javascript" src="jquery.min.js"></script>

怎样制作超过一屏才显示的jquery返回顶部按钮

3、在</body>前加入返回按钮代码:

<div id="back-to-top" style="display: block;"><a href="#top"></a></div>

怎样制作超过一屏才显示的jquery返回顶部按钮

4、在<head></head>中加入样式,如果是引用css文件,直接加css文件中,但要注意图片的路径正确

<style type="text/css">

#back-to-top{

position:fixed;

bottom:5%;

left:90%;

}

#back-to-top a{

display:block;

height:50px;

width:50px;

background:url(top.png) no-repeat center center;

margin-bottom:5px;

}

</style>

怎样制作超过一屏才显示的jquery返回顶部按钮

5、在<head></head>或</body>前加入jq代码

<script type="text/javascript">

$(document).ready(function(){

$("#back-to-top").hide();

$(function () {

$(window).scroll(function(){

if ($(window).scrollTop()>100){

$("#back-to-top").fadeIn(500);

}

else

{

$("#back-to-top").fadeOut(500);

}

});

$("#back-to-top").click(function(){

$('body,html').animate({scrollTop:0},100);

return false;

});

});

});

  </script>

怎样制作超过一屏才显示的jquery返回顶部按钮

6、我们来看一下效果,第一屏显示空白,第二屏返回顶部按钮

怎样制作超过一屏才显示的jquery返回顶部按钮

怎样制作超过一屏才显示的jquery返回顶部按钮

  • jQuery返回顶部
  • jquery 悬浮按钮的方法
  • jQuery:当双击按钮时,隐藏或显示元素
  • jquery+css3按钮激活状态特效
  • jquery中confirm如何把取消按钮改为否
  • 热门搜索
    消瘦的人如何增肥 怎么重置无线路由器 瑞麒g6怎么样 btv生活 尿黄是什么原因 如何给路由器设置密码 蝙蝠飞到家里是什么预兆 如何更改图片大小 怎么改差评 emo是什么意思