时间:2021-05-26
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。
首先需要在顶部添加如下html元素:
其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:
上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:
有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script> $(function(){ //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } }); //当点击跳转链接后,回到页面顶部位置 $("#back-to-top").click(function(){ $('body,html').animate({scrollTop:0},1000); return false; }); }); }); </script>这样就可以了。
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1假如浏览器不支持JavaScript怎么办?a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。b.在js被禁用的情况下要保证网页仍能
1假如浏览器不支持JavaScript怎么办?a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。b.在js被禁用的情况下要保证网页仍能
html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现。js代码复制代码代码如下:(function(){//判断是否支持pla
本文为大家分享了jQuery实现的音乐播放试听列表,可以实现播放,暂停,自动获取音频路径功能,具体内容如下1.html文件音乐播放试听列表你的浏览器不支持音频播
如果是在浏览器上传,那一般上传功能是通过javasrcipt实现的。上传附件上传不上的原因: 1、当前使用的浏览器不支持javascript。 2、没有启用