jquery实现页面回到顶部TOP(回滚到顶部)

JQuery 763 0 2024-04-05

jquery实现页面回到顶部TOP(回滚到顶部)

JQ实现在网页页面较长时回到顶部

HTML代码:

LANG-HTML
www.hilo8.com
  1. <div id="back-to-top">TOP</div>
  2. //样式
  3. #back-to-top {
  4. position: fixed;
  5. bottom: 20px;
  6. right: 20px;
  7. display: none;
  8. z-index: 99;
  9. background-color: #EEE;
  10. padding: 5px;
  11. border: #DDD 1px solid;
  12. border-radius: 4px;
  13. cursor: pointer;
  14. }

JS代码:

LANG-JS
www.hilo8.com
  1. $(document).ready(function(){
  2. // 监听滚动事件
  3. $(window).scroll(function(){
  4. // 当向下滚动超过100px时显示按钮
  5. if ($(this).scrollTop() > 100) {
  6. $('#back-to-top').fadeIn();
  7. } else {
  8. $('#back-to-top').fadeOut();
  9. }
  10. });
  11. // 当点击按钮时回到顶部
  12. $('#back-to-top').click(function(){
  13. $('body,html').animate({scrollTop:0},800);
  14. });
  15. });

上一篇:修改jquery默认$符号

下一篇:Jquery Toast Plugin通知信息插件使用说明

讨论数量:0

请先登录再发表讨论。 2025-06-19

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链