實現彈性返回頂部

時間 2019-12-08

原文原文鏈接

需求

返回頂部時有滾動效果
鼠標懸停時有交互效果
默認隱藏返回頂部按鈕
按鈕固定在屏幕右下方

實現

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。