jQuery回顶部

Posted 2021-04-08 黄良钵博客

1. <!-- 返回顶部 -->

2. <div class="flex align-items-center justify-content-center goTop">回顶部</div>

3. $(window).scroll(function () {

4.     /* 判断滚动条 距离页面顶部的距离 100可以自定义*/

5.     if ($(window).scrollTop() > 100) {

6.         $(".goTop").fadeIn(100); /* 这里用.show()也可以 只是效果太丑 */

7.         $('.goTop').css({

8.             display: 'flex'

9.         })

10.     } else {

11.         $(".goTop").fadeOut(100);

12.     }

13. });

14. 
    

15. // 回顶部

16. $('.goTop').click(function () {

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

18.         scrollTop: 0

19.     }, 500);

20.     return false;

21. })