点击右下角按钮回到页面顶部实例

加入收藏设为首页

程序人生: 点击右下角按钮回到页面顶部实例
时间：2020/12/13 17:20:04 作者：枫叶来源：solgle.com 查看：329 评论：4
内容摘要：最近对网站又做一点改进，当页面向下拖动滚动条的时候，会出现回到顶部的按钮，通常这个按钮呈现漂浮状，通常出现在页面的右下角。如果是用的div，这个做起来就不难了，比较简单，下面是这个div的设计代码...
最近对网站又做一点改进，当页面向下拖动滚动条的时候，会出现回到顶部的按钮，通常这个按钮呈现漂浮状，出现在页面的右下角。

如果是用的div，这个做起来就不难了，比较简单，下面是这个div的设计代码

<div onclick='javascript:;' id='btnTotop'>

<img src='totop.gif'

style='width: 2rem;height: 2rem;position: fixed;bottom: 2rem;right: 2rem;z-index: 9999;' />

</div>

在加上js代码，那这个小控件的功能就出效果了

<script language='javascript' type='text/javascript'>

//js主要脚本实现

$(document).ready(function() {

//首先将#btn隐藏

$("#btnTotop").hide();

//当滚动条的位置处于距顶部50像素以下时，到达顶部的按钮就出现，否则就隐藏，看不见

$(function() {

$(window).scroll(function() {

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

$("#btnTotop").fadeIn(200);

} else {

$("#btnTotop").fadeOut(200);

}

});

//当点击该按钮后，将回到页面顶部位置

$("#btnTotop").click(function() {

$('body,html').animate({

scrollTop: 0

},

500);

return false;

});

});

});

</script>

以上都是经过使用，能行得通，靠谱的脚本。如果你刚好浏览到本页面，正好可以看到该项功能的效果。

标签：点击回到顶部


solgle.com 版权所有，欢迎分享！！！

上一篇：弃用微博评论箱，加载股票组合的更新
下一篇：jquery实现图片轮播实践案例

相关文章

相关评论

本类更新

5-18
百度地图车机版v5.0.1.6版本安装下载
6-24
Java webservice Response传递XML字符串被转义
5-8
java main 方法参数传递执行
12-25
弃用微博评论箱，加载股票组合的更新
12-13
点击右下角按钮回到页面顶部实例
12-13
jquery实现图片轮播实践案例
6-15
话说银行数据仓库的概论
6-9
关于批量的解读
4-27
java EE框架Spring Aop使用案例
4-26
java EE spring框架loC使用案例

本类推荐

本类排行

: 国家数据 | 中证指数 | Oracle官方文档 | 沪深行情 | 流量统计 | 深交所 | 上交所 | 中国证券登记 | 同业拆放利率 | 巨潮资讯 | 指数估值 | 看财报 |

联系我们 - 关于我们 - 网站同盟