JQ实现在网页页面较长时回到顶部
HTML代码:
LANG-HTMLwww.hilo8.com
- <div id="back-to-top">TOP</div>
- //样式
- #back-to-top {
- position: fixed;
- bottom: 20px;
- right: 20px;
- display: none;
- z-index: 99;
- background-color: #EEE;
- padding: 5px;
- border: #DDD 1px solid;
- border-radius: 4px;
- cursor: pointer;
- }
JS代码:
LANG-JSwww.hilo8.com
- $(document).ready(function(){
- // 监听滚动事件
- $(window).scroll(function(){
- // 当向下滚动超过100px时显示按钮
- if ($(this).scrollTop() > 100) {
- $('#back-to-top').fadeIn();
- } else {
- $('#back-to-top').fadeOut();
- }
- });
- // 当点击按钮时回到顶部
- $('#back-to-top').click(function(){
- $('body,html').animate({scrollTop:0},800);
- });
- });
上一篇:修改jquery默认$符号
下一篇:Jquery Toast Plugin通知信息插件使用说明
讨论数量:0