实现弹性返回顶部

时间：2022-05-29 10:08:29

需求

  • 返回顶部时有滚动效果
  • 鼠标悬停时有交互效果
  • 默认隐藏返回顶部按钮
  • 按钮固定在屏幕右下方

实现

HTML

<span id="go-to-top">
    <i class="fa fa-chevron-up"></i>
</span>

CSS

#go-to-top {
    /* 固定在屏幕右下角 */
    position: fixed;
    right: 35px;
    bottom: 60px;
    /* 默认隐藏 */
    display: none;
    /* 盒模型 */
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    /* 文字 */
    text-align: center;
    color: #fff;
    /* 可以换成图片背景 */
    background-color: #ccc;
    transition: background-color 0.4s;
}
#go-to-top:hover {
    background-color: #999;
}

JavaScript

/**
 * 返回顶部
 */
// 返回顶部  
function getScrollTop() {
    return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value) 
{ 
    if (document.documentElement.scrollTop) 
    { 
        document.documentElement.scrollTop = value; 
    } 
    else 
    { 
        document.body.scrollTop = value; 
    } 
}
// 弹性返回顶部，展现滚动的动画
var goToTop = $('#go-to-top');
goToTop.click(function(event) {
    var goTop = setInterval(scrollMove, 12); 
    function scrollMove() 
    { 
        setScrollTop(getScrollTop() / 1.1); 
        if (getScrollTop() < 1) clearInterval(goTop); 
    } 
});
// 自动隐藏放回顶部按钮
$(window).scroll(function(event) {
    getScrollTop()>0 ? goToTop.fadeIn('fast') : goToTop.fadeOut('fast');
});

解决方案

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>弹性放回顶部</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        #go-to-top {
            /* 固定在屏幕右下角 */
            position: fixed;
            right: 35px;
            bottom: 60px;
            /* 默认隐藏 */
            display: none;
            /* 盒模型 */
            width: 40px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            /* 文字 */
            text-align: center;
            color: #fff;
            /* 可以换成图片背景 */
            background-color: #ccc;
            transition: background-color 0.4s;
        }
        #go-to-top:hover {
            /* 鼠标悬停的交互 */
            background-color: #999;
        }
    </style>
</head>

<body>
    <!-- 一堆占位div  -->
    <div style="width: 100%; height: 400px; background-color: red"></div>
    <div style="width: 100%; height: 400px; background-color: green"></div>
    <div style="width: 100%; height: 400px; background-color: blue"></div>
    <div style="width: 100%; height: 400px; background-color: yellow"></div>
    <div style="width: 100%; height: 400px; background-color: black"></div>
    <div style="width: 100%; height: 400px; background-color: orange"></div>
    <div style="width: 100%; height: 400px; background-color: white"></div>
    <div style="width: 100%; height: 400px; background-color: pink"></div>

    <!-- 返回顶部组件 -->
    <span id="go-to-top">
        <i class="fa fa-chevron-up"></i>
    </span>

    <!-- 脚本 -->
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script>
        /**
         * 返回顶部
         */
        // 返回顶部  
        function getScrollTop() {
            return document.documentElement.scrollTop + document.body.scrollTop;
        }
        function setScrollTop(value) 
        { 
            if (document.documentElement.scrollTop) 
            { 
                document.documentElement.scrollTop = value; 
            } 
            else 
            { 
                document.body.scrollTop = value; 
            } 
        }
        // 弹性返回顶部，展现滚动的动画
        var goToTop = $('#go-to-top');
        goToTop.click(function(event) {
            var goTop = setInterval(scrollMove, 12); 
            function scrollMove() 
            { 
                setScrollTop(getScrollTop() / 1.1); 
                if (getScrollTop() < 1) clearInterval(goTop); 
            } 
        });
        // 自动隐藏放回顶部按钮
        $(window).scroll(function(event) {
            getScrollTop()>0 ? goToTop.fadeIn('fast') : goToTop.fadeOut('fast');
        });
    </script>
</body>

</html>
标签：

相关文章