自动显示隐藏返回顶部功能

最新推荐文章于 2024-02-02 11:56:07 发布

joseph_liu81

最新推荐文章于 2024-02-02 11:56:07 发布

阅读量2.5k

点赞数

分类专栏： Web UI 文章标签： function scroll jquery 浏览器 div url

本文链接：https://blog.csdn.net/joseph_liu81/article/details/7598271

版权

Web UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能描述：

当通过浏览器拖动滚动条后，自动显示“返回顶部”图标，当点击“返回顶部”图标后，自动隐藏图标

代码中图标gotop.gif用自己的图片替换就可以了。主要用到jquery的scrollTop()函数，通过拖动滚动条事件来

跟踪滚动条滚动的高度。

代码如下：

在页面头文件中引入jquery

<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

    /**
    *锚点控制
    */
    $(document).ready(function () {
    $("body").attr("id", "top");
    var tpHtml = " <div id='topcontrol' style=' display:none; position: fixed; bottom: 30px; right: 20px; cursor: pointer;' title='返回顶部'><a style='background: url(../images/gotop.gif) no-repeat scroll 0 0 transparent;color: #FFFFFF;display: inline-block;font-size: 0;height: 54px;text-decoration: none;width: 54px;' href='#top'> </a></div>";
    $("body").append(tpHtml);
    $(window).scroll(function () {

        if ($(window).scrollTop() > 400) {
            $("#topcontrol").fadeIn();
        }
        else if ($(window).scrollTop() == 0) {
            $("#topcontrol").fadeOut();
        }
    });
    $("#topcontrol").click(function () {
        $(this).fadeOut();

    });
    /***************************/
});