欢迎访问我的博客,博客正在建设中,如果你有好的建议欢迎来信!!-小酌
当前位置: 首页 > 前端 > javascript

原生JS返回顶部带效果(图文)

小酌子 2018-09-22 8 0

博客功能慢慢添加中~~~,这两天发现随着博客文章慢慢变多的情况下,首页用2屏都已经显示不完全部内容,于是写了一个返回顶部的小功能。主要功能为:当滚动条下拉到一定位置返回顶部图标显示,鼠标移入图片变文字,点击以后线性返回顶部
主要功能:实现返回顶部
特性:
  • 滚动条下拉至一定位置按钮出现
  • 鼠标移入按钮后图片变文字说明
  • 点击后缓慢返回顶部
  • 返回顶部后按钮消失
实例分析:
  1. html部份 
    这里是用的外层DIV做固定定位,span用来装图片和文字。

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                返回顶部
            </title>
        </head>
        <body>
            <div class="heightbox"></div>
            <div class="back-top" id="back-top">
                <span id="backtotop" onclick="gotoTop()">
                    <img src="img/up.png"><b>回到顶部</b></img>
                </span>
            </div>
        </body>
    </html>
  2. CSS样式部份
     
    都是些很基本的语法,写的很烂,将就能用。

            <style type="text/css">
                /* 回到顶部 */
                *{
                    margin: 0;
                    padding: 0;
                    font-size: 62.5%;
                }
                .heightbox{
                    width: 100%;
                    height: 2000px;
                }
                .back-top{
                    display: none;
                    width: 40px;
                    height: 40px;
                    position: fixed;
                    bottom: 40px;
                    right: 10px;
                    background-color: #f80;
                    overflow: hidden;
                    transition: all 2s;
                }
                .back-top span{
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                    transition: all 2s;
                    text-align: center;
                }
                .back-top span:hover{
                    text-indent:0;
                }
                .back-top img{
                    display: block;
                    width: 100%;
                    height: 100%;
                    transition: all 1s;
                    background-color: #f80;
                }
                .back-top img:hover{
                    opacity: 0;
                }
                .back-top span b{
                    position:absolute;
                    top: 0;
                    left: 0;
                    font-size: 10px;
                    color: white;
                    z-index: -1;
                }
            </style>

     
  3. JS控制部份
    一共两个函数,一个用来控制返回,一个用来控制显示和隐藏。
    获取窗口高度后与滚动条的垂直高度做对比,当大于窗口高度时显示,小于时隐藏。
    大楷思路就是获取滚动条离顶部的垂直距离,窗口高度等做对比计算,然后用这个值除以每次的滚动距离。条件达成前循环滚动,最终返回顶部,实现慢速返回的效果。

            <script type="text/javascript">
                var backtop = document.getElementById("back-top");
                // 返回顶部函数
                function gotoTop(acce,toptime) {
                    acce = acce || 0.1;
                    toptime = toptime || 10;
                    var elementY = 0;
                    var windowY = 0;
                    if (document.documentElement) {
                        elementY = document.documentElement.scrollTop || 0;
                    }
                    var windowY = window.scrollY || 0;
                    // 滚动条到顶部的垂直距离
                    var topY = Math.max(elementY,windowY);
                    // 滚动距离 = 目前距离 / 速度, 因为距离会越来越小, 所以速度是大于 1 的数, 滚动距离会越来越小
                    var speeding = 1 + acce;
                    window.scrollTo(0,Math.floor(topY / speeding));
                 
                    // 如果距离不为零, 继续执行函数
                    if(topY > 0) {
                        var run_top = "gotoTop(" + acce + ", " + toptime + ")";
                        window.setTimeout(run_top, toptime);
                    }
                }
                // 鼠标就接显示和隐藏控制按钮
                window.onscroll = function() {
                    var clientHeight = document.documentElement.clientHeight;
                    var scrollTop = document.documentElement.scrollTop;
                    backtop.style.display = scrollTop < clientHeight ? "none" : "block";
                }
            </script>

     



 

版权声明:除作者特别注明外,本站所有文章均为作者个人原创

转载请注明:出处 Récit | 怡然自酌 原生JS返回顶部带效果(图文)

回到顶部