js返回頁面頂部的實現(layui)

程式設計師詩人發表於2018-06-01
JSUI

js程式碼

// 點選按鈕，返回頂部
function topFunction() {
    document.getElementsByClassName(`layui-body`)[0].scrollTop = 0;
}

function scrollFun() {
    var layuiBodyScrollTop = document.getElementsByClassName(`layui-body`)[0].scrollTop
    console.log(layuiBodyScrollTop)
    if (layuiBodyScrollTop > 1000) {
        document.getElementById("back-to-top").style.display = "block";
    } else {
        document.getElementById("back-to-top").style.display = "none";
    }
}

/*註冊事件*/
if (document.addEventListener) {
    document.addEventListener(`DOMMouseScroll`, scrollFun, false);
}//W3C
window.onmousewheel = document.onmousewheel = scrollFun;//IE/Opera/Chrome

需要注意的是, 你必須要確定好滑鼠滾動所繫結的DOM元素到底是什麼.例如, layui中的頁面滾動繫結的是 document.getElementsByClassName(`layui-body`)

css程式碼

#back-to-top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 99999999999999;
    border: none;
    outline: none;
    background-color: #009688;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 10px;
}

#back-to-top:hover {
    background-color: #23262E;
}

前端HTML部分:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 強制讓文件與裝置的寬度保持1：1 -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="/assets/logo.jpg" rel="shortcut icon" type="image/x-icon"/>
    <title>MicroTek</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
    <style>
        .layui-body {
            left: 40px;
        }

        .layui-layout-admin .layui-footer {
            left: 0;
        }

        .layui-layout-admin .layui-body {
            bottom: 0;
        }

        .layui-card-header {
            border-bottom: 0;
        }

        .layui-card {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, .05);
        }
    </style>

    <link href="/bower_components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/bower_components/bootstrap-table/src/bootstrap-table.css" rel="stylesheet">
    <link href="/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="/bower_components/pnotify/src/pnotify.css" rel="stylesheet">
    <link href="/app.css" rel="stylesheet">

</head>
<body class="layui-layout-body">
<button onclick="topFunction()" id="back-to-top" title="回頂部">返回頂部</button>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <img src="/assets/logo.jpg" style="height: 2.5em ;width: 2.5em">
            <a href="/" style="color: #009688;font-size: 1.2em;">微技 GD</a>
        </div>
        <!-- 頭部區域（可配合layui已有的水平導航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="/">GD 技術流</a></li>

            <li class="layui-nav-item">
                <a href="javascript:;">微圖</a>
                <dl class="layui-nav-child">
                    <dd><a href="/sotu_gank_view">乾貨福利</a></dd>
                    <dd><a href="/sotu_favorite_view">精選收藏</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item">
                <a href="javascript:;">爬蟲任務</a>
                <dl class="layui-nav-child">
                    <dd><a href="/knowledge/doCrawJianShu" target="_blank">抓取簡書</a></dd>
                    <dd><a href="/knowledge/doCrawSegmentFaultKnowledge" target="_blank">抓取SegmentFault</a></dd>
                    <dd><a href="/knowledge/doCrawOSChinaKnowledge" target="_blank">抓取OSChina</a></dd>
                    <dd><a href="/knowledge/doCrawITEyeKnowledge" target="_blank">抓取ITEye</a></dd>
                    <dd><a href="/knowledge/doCrawImportNewKnowledge" target="_blank">抓取ImportNew</a></dd>
                    <dd><a href="/knowledge/doCrawCNBlogKnowledge" target="_blank">抓取CNBlog</a></dd>
                    <dd><a href="/knowledge/doCrawInfoQKnowledge" target="_blank">抓取InfoQ</a></dd>
                    <dd><a href="/knowledge/doCrawBlockChainKnowledge" target="_blank">BlockChain</a></dd>
                    <dd><a href="/knowledge/KnowledgeCrawlerOfSpring4All" target="_blank">Spring4All</a></dd>
                    <dd><a href="/knowledge/KnowledgeCrawlerOfConcurrentProgramming" target="_blank">併發程式設計網</a></dd>
                    <dd></dd>
                    <dd><a href="/doGankImageCrawJob">乾貨福利</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item">
                <a href="javascript:;">解決方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">列表一</a></dd>
                    <dd><a href="javascript:;">列表二</a></dd>
                    <dd><a href="">超連結</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">機器人管理</a></li>
            <li class="layui-nav-item"><a href="">釋出服務</a></li>
            <li class="layui-nav-item"><a href="">使用者管理</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系統</a>
                <dl class="layui-nav-child">
                    <dd><a href="">郵件管理</a></dd>
                    <dd><a href="">訊息管理</a></dd>
                    <dd><a href="">授權管理</a></dd>
                </dl>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">微技</a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本資料</a></dd>
                    <dd><a href="">安全設定</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
    <div class="layui-body">

    ....

錨點位置:

<button onclick="topFunction()" id="back-to-top" title="回頂部">返回頂部</button>


相關文章