开发者社区> 程序员诗人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js 返回页面顶部的实现( layui)

简介: js代码 // 点击按钮,返回顶部 function topFunction() { document.getElementsByClassName('layui-body')[0].
+关注继续查看

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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js:URL、URLSearchParams解析当前页面url和查询参数
js:URL、URLSearchParams解析当前页面url和查询参数
0 0
利用JavaScript的循环语句再页面中打印图形
利用JavaScript的循环语句再页面中打印图形 前面两篇博客我们讲解怎么使用for循环进行数学的简单计算,这篇博客主要是利用js的循环语句在网页中打印出各种图形。 1.利用js的循环语句打印矩形 // 利用循环语句在网页中打印十行十列的矩形 for (var j = 0; j < 10; j++) { // 一行打印10个 @ for (var i = 0; i < 10; i++) { document.write("@"); } document.write("<br/>");
0 0
页面访问时渲染过程中 HTML、JS 的关系
之前写过一篇关于不同 DOM 操作结果不同的文章,那篇文章只是简单的介绍了一下 HTML 及外部资源与 JS 脚本执行的一个时机,其实这个还可以再拓展一下,比如 JS 和 DOMContentLoad
0 0
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
0 0
js实现悬浮按钮并回到页面顶部
js实现悬浮按钮并回到页面顶部
0 0
js微信小程序页面左上角返回跳转指定页面
js微信小程序页面左上角返回跳转指定页面
0 0
网站流量日志埋点收集— 原理实现雏形—如何解决 js 和 html 页面耦合问题|学习笔记
快速学习网站流量日志埋点收集—原理实现雏形—如何解决 js 和 html 页面耦合问题
0 0
网站流量日志分析 —数据采集—页面埋点 JavaScript 收集数据|学习笔记
快速学习网站流量日志分析—数据采集—页面埋点 JavaScript 收集数据
0 0
通过Javascript实现把数组里的内容以表格方式呈现到页面从
通过Javascript实现把数组里的内容以表格方式呈现到页面从
0 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
0 0
+关注
程序员诗人
一个会写诗的程序员
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载