【JavaScript Demo】回到顶部功能实现

简介:

随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多。当内容堆积影响了用户体验,就需考虑如何提升用户体验。在这一系列的改动中,“回到顶部”的功能成为了一个经典。

 

1.页面布局

(1) 我们先简单的搭建一个长度为1200px的页面,保证视口的高度足够。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <title>Back to top</title>
    <style type="text/css">
        #content { height: 1200px;}
        .text_center { text-align: center;}
    </style>
</head>
<body>
<div id="content">
    <div class="text_center">往下拉哟</div><br />
    <div class="text_center"></div><br />
    <div class="text_center"></div><br />
    <div class="text_center"></div><br />
    <div class="text_center"></div><br />
    <div class="text_center"></div>
</div>
</body>
</html>
复制代码

(2) 然后我们准备一张图片作为返回顶部的按钮:

(3) 接着,我们把按钮放到网页上去:

HTML代码:

复制代码
<body> 
  ...
<a id="btnTop" class="btnTop" href="javascript:;" title="Back to top">
    <img src="img/o_to_Top.png" class="imageTop">
</a>
</body>
复制代码

CSS代码:

.btnTop { position: fixed; right: 2%; bottom: 2%; cursor: pointer; opacity: .7; z-index: 9; }
.btnTop:hover { opacity: 1;}
.imageTop { height: 72px; height: 72px;}

现在的显示效果:

 

2.添加JS实现效果

原理:通过控制当前视口顶端的数值来实现

效果:返回顶部按钮默认不显示,当向下滑动到一定距离时显示。点击按钮后,当前页面由快到慢地返回页面顶部。

实现:

我们先让返回页面按钮默认不显示:

<a id="btnTop" style="display:none;" ...

然后,我们新建JavaScript文件并引用,具体功能实现代码如下,应该备注的比较详细:

复制代码
window.onload = function(){
    var btnTop = document.getElementById("btnTop");
    var timer = null;

    window.onscroll = function(){
        var backTop = getScrollTop();
        if(backTop >= 20){ //当前视口顶端大于等于20时,显示返回顶部的按钮
            btnTop.style.display = "block";
        }else {
            btnTop.style.display = "none";
        }
    };

    btnTop.onclick = function(){
        //定时执行
        timer = setInterval(function(){
            var backTop = getScrollTop();
            var speedTop = backTop / 10;
            //修改当前视口的数值,产生向上活动的效果
            setScrollTop(backTop - speedTop);
            if(backTop == 0){
                //结束函数执行
                clearInterval(timer);
            }
        },30);
    };
    //获取当前视口的顶端数值
    var getScrollTop = function(){
        var sTop ;
        if (document.compatMode == "BackCompat")
        {
            sTop = document.body.scrollTop;
        }
        else
        {
            //document.compatMode == \"CSS1Compat\"
            sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
        }
        return sTop;
    };
    //设置当前视口的顶端数值
    var setScrollTop = function(top){

        if (document.compatMode == "BackCompat")
        {
            document.body.scrollTop = top;
        }
        else
        {
            if(document.documentElement.scrollTop == 0){
                document.body.scrollTop = top;
            }else{
                document.documentElement.scrollTop = top;
            }
        }
    }
};
复制代码

现在的效果如下:

 

效果展示:http://yexiaochao.github.io/demo/page4top.html






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/5988005.html,如需转载请自行联系原作者
目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
2月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
16天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
23天前
|
JavaScript 前端开发 API
|
23天前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
12 1
|
29天前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
28天前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
25 1
|
22天前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
13 0
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
39 0
JS配合CSS3实现动画和拖动小星星小Demo
|
28天前
|
JavaScript 安全 前端开发
js实现复制功能
js实现复制功能
15 0