找回密码
 立即注册
搜索
查看: 1781|回复: 0

[jQuery框架] 点击返回顶部功能

[复制链接]

581

主题

110

回帖

4066

积分

管理员

积分
4066

众神之神

发表于 2016-8-1 19:02:45 | 显示全部楼层 |阅读模式
如果所有的html代码都在content包裹器中

1.返回顶部按钮的样式,用css定位,默认隐藏状态;
  1. position: fixed;
复制代码
2.滚动条距离顶部大于x像素的时候展示,否则隐藏;
  1. $('.content', page).on('scroll', function(){   
  2.     var gotop = $('#gotop');
  3.     if ($(this).scrollTop() > 100) {
  4.         if (!gotop || !gotop.length) {
  5.             $('.content', page).append('<div id="gotop"><span class="iconfont color-gray fonta2"></span></div>');
  6.             $('#gotop').bind('click', function(){
  7.                 $('.content', page).scrollTop(0);
  8.             });
  9.         }
  10.         gotop.show();
  11.     } else {
  12.         gotop.hide();
  13.     }
  14. });
复制代码


3.设置点击事件之后执行:
  1. $('.content', page).scrollTop(0);
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|十三博客 ( 鲁ICP备2023000528号 )

GMT+8, 2026-6-1 18:41 , Processed in 0.049119 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表