jQuery实现返回顶部效果

最新推荐文章于 2021-10-31 23:25:52 发布

转载最新推荐文章于 2021-10-31 23:25:52 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yan-ck/p/5122072.html

本文介绍了一种简单的方法，通过使用jQuery库，快速在网页中添加一个按钮，当点击该按钮时，页面将自动滚动到顶部。这种方法不仅简化了用户的操作流程，还提升了用户体验。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .toTop{
                width: 38px;
                height: 38px;
                background: yellow;
                text-decoration: none;
                overflow: hidden;
                position: fixed;
                right: 100px;
                bottom: 100px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".toTop").click(function(){
                    $("body").scrollTop(0);
                })
            })
        </script>
    </head>
    <body>
        <a href="#none" class="toTop"><span>返回<br/>顶部</span></a>
    </body>
</html>