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

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:; }

.btnTop:hover { opacity:;}

.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

【JavaScript Demo】回到顶部功能实现的更多相关文章

  1. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  2. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  3. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  4. jQuerry点击按钮回到顶部功能

    简单实现点击按钮回到顶部功能

  5. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  6. JavaScript实现回到顶部

    HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...

  7. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  8. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

随机推荐

  1. CSS3透明属性opacity

    例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px; ...

  2. SQL SERVER 9003错误解决方法 只适用于SQL2000

    SQLSERVER 9003错误解决方法 只适用于SQL2000 (只适用于SQL2000) "无法打开新数据库 'POS'.CREATE DATABASE 中止. (Microsoft S ...

  3. 基于CkEditor实现.net在线开发之路（1）

    我以前的公司使用office sharepoint designer为界面设计器,嵌套各种自定义控件,进行各种管理软件,工作流的开发,遇到比较复杂的逻辑,则采用本地写类库,生成DLL上传到服务器,通过 ...

  4. form表单提交和阻止

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 疯狂Android讲义 - 学习笔记（五）

    第五章 Android使用统一的Intent对象来封装“启动意图”,不管是启动Activity.Service组件.或者BroadcastReceiver等,提供了一致的编程模型.Intent设计有点 ...

  6. 偷偷发请求的ajax

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  7. Web AppBuilder Widget使用共享类库的方式

    Web AppBuilder是Esri公司推出的快速WebGIS应用搭建工具,具有以下特性: 不需要编程,快速创建应用 WYSIWYG 交互式应用 支持2D和3D应用 基于ArcGIS API for ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q136-Q138)

    Question 136You need to create a custom content type and specify the content type ID.What should you ...

  9. android doc里面adb连接出现问题的解决方法

    第一保证连接的两边都是有网的 第二  就是网上常说的1.adb kill-server 2.adb start-server 3.adb remount 但是在运行adb remount有可能会提示 ...

  10. iOS 系统根据导航栏和状态栏自动修改布局

    问题 条件:1.有一个全屏大小的带导航的controller 2.隐藏导航栏,最顶上还会留出状态栏的位置,而不是全屏显示 解决方法 self.automaticallyAdjustsScrollVie ...