sxScrollToTop

功能描述

页面内容较多时，引用此功能。页面右下角会显示“回顶部”按钮，点击展现滚动效果。再次点击或者点击屏幕其他位置，会停止滚动。
这个滚动过程平滑美观，增加趣味性。

依赖的插件

不需要依赖，引入即可使用

快速使用

直接引用到页面中即可使用，注意对btn,body变量的赋值。详细说明见代码注释。

//code

关键html部分

    <div class="sx-totop" id="totop">
        <img src="./image/sx_sxScrollToTop_btn_0.png" id="totop-img">
    </div>

主要css样式

    .sx-totop {
        position: fixed;
        bottom: -50px;
        right: 10px;
        width: 50px;
        z-index: 99;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }

    .sx-totop img {
        width: 45px;
        cursor: pointer;
    }

重要的js参数定义

    var btn = document.getElementById("totop-img");     //对应“返回顶部”的对象
    var body = document.getElementById('totop-body');   //整体页面
    ...

特别说明

本示例提供了“小火箭”造型图片，你也可以换成任意希望的图片效果。
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18