“回到顶端”按钮实现

最新推荐文章于 2024-05-31 19:09:15 发布

wentao365

最新推荐文章于 2024-05-31 19:09:15 发布

阅读量60

点赞数

分类专栏：网站前台文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wentao365/article/details/84424727

版权

网站前台专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>“回到顶端”按钮实现</title>
    <script type="text/javascript" src="/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() > 15) {
                    $('.back-to-top').fadeIn(100);
                } else {
                    $('.back-to-top').fadeOut(100);
                }
            });

            // jQuery实现动画滚动
            $('.back-to-top').click(function(event) {
                event.preventDefault();
                $('html, body').animate({scrollTop: 0}, 500);
            })
        });
    </script>
</head>
<body>
<div id="content">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div class="back-to-top">back-to-top</div>
</div>
</body>
</html>

[img]http://dl.iteye.com/upload/attachment/0083/8234/1ec1b592-74ff-363e-bb23-cd30e21480d8.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0083/8236/c9540735-6f14-3629-b867-58b3b3ea6bb3.jpg[/img]

wentao365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“回到顶端”按钮实现

[code="java"] “回到顶端”按钮实现 $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 15) { $('...
复制链接

扫一扫