在浏览网页时，我们一般是拖动滚动条向下滑动，浏览下面的内容，当页面超过单页时，右下角会出现一个回到顶部的图标，有些网站这个图标一直显示在右下角的。

有些网站使用锚链接来实现页面内容的跳转，但这种效果的用户体验比较差，因为是突然跳转，眼睛来不及反应。

这里我们使用js实现页面返回顶部。为了使滚动条渐进地上移，我们需要使用定时器。同时通过不断改变滚动条顶部的高度来控制页面的变化。

下面为具体代码实现

index.html:

<!DOCTYPE>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link  rel="stylesheet" type="text/css" href="style.css"/>

    <script type="text/javascript" src="script.js"></script>

</head>

<body>

    <div class="box">

        <img src="tb_bg.jpg"/>

    </div>

    <a href="javascript:;" id="btn" title="回到顶部"></a>

</body>

</html>

style.css:

.box {

    width:1190px;

    /*图片居中*/

    magin:0 auto;

}

#btn {

    width:40px;

    height:40px;

    /*设置固定位置*/

    position:fixed;

    left:50%;

    margin-left:610px;

    bottom:30px;

    background:url(top_bg.png) no-repeat left top;

}

/*鼠标浮动切换图片效果*/

#btn:hover {

    background:url(top_bg.png) no-repeat 0 -40px;

}

script.js:

/**

 * Created by lujie on 2016/11/15.

 */

//页面加载完毕后触发

window.onload = function () {

    var obtn = document.getElementById('btn');

    var timer = null;

    var isTop = true;

    //滚动条滚动时触发

    window.onscroll = function () {

        if(!isTop){

            clearInterval(timer);

        }

        isTop = false;

    }

    obtn.onclick = function () {

        //设置定时器

        timer = setInterval(function () {

            //滚动条距离顶部的高度

            var osTop = document.documentElement.scrollTop||document.body.scrollTop;

            var isSpeed = Math.ceil(osTop/6);

            document.documentElement.scrollTop = document.body.scrollTop = osTop-isSpeed;

            isTop = true;

            if(osTop == 0){

                clearInterval(timer);

            }

        },30);

    }

}

注：IE浏览器滚动条顶部的高度：document.documentElement.scrollTop

谷歌浏览器滚动条顶部的高度：document.body.scrollTop

javascript实现网页返回顶部功能的更多相关文章

  1. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  2. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

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

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

  4. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

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

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

  6. JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...

  7. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

  8. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  9. 转载：jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

随机推荐

  1. lintcode-114-不同的路径

    114-不同的路径 有一个机器人的位于一个 m × n 个网格左上角. 机器人每一时刻只能向下或者向右移动一步.机器人试图达到网格的右下角. 问有多少条不同的路径? 注意事项 n和m均不超过100 样 ...

  2. 【原创】Sagger使用

    Swagger使用 1. Spring MVC配置文件中的配置 <mvc:annotation-driven/> <context:component-scan base-packa ...

  3. CFS 调度器

    CFS调度器的原理明白了但是有个地方,搜遍了整个网络也没找到一个合理的解释: if (delta > ideal_runtime) resched_task(rq_of(cfs_rq)-> ...

  4. [洛谷P4940]Portal2

    题目大意:维护两个栈,几个操作: $PUSH\;x\;num:$把$num$压入栈$x$ $POP\;x:$弹出栈$x$栈顶元素 $ADD\;x:$取出两个栈栈顶,把相加值压入栈$x$ $SUB\;x ...

  5. 【BZOJ 1082】[SCOI2005]栅栏 二分+dfs

    对于最优解我们发现所有的最优解都可以是前多少多少个,那么我们就二分这个前多少多少个,然后用dfs去判解,我们发现在dfs的过程中如果不剪枝几乎必T,所以我们就需要一些有效的剪枝 I. 我们在枚举过程中 ...

  6. 【BZOJ 3123】 [Sdoi2013]森林 主席树启发式合并

    我们直接按父子关系建主席树,然后记录倍增方便以后求LCA,同时用并查集维护根节点,而且还要记录根节点对应的size,用来对其启发式合并,然后每当我们合并的时候我们都要暴力拆小的一部分重复以上部分,总时 ...

  7. org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.oskyhang.gbd.service.UserService] found for dependency: expected at least 1 bean which qualifies as aut

    spring中一个符号的错误居然让我浪费了四五个小时才找出来,不得不给自己了两个耳光.. 由于新建项目与原来项目的目录结构有所不同,copy过来的配置文件,有些地方修改的不彻底,导致spring扫描注 ...

  8. Document base D:\devTools\apache-tomcat-6.0.51\webapps\AppService does not exist or is not a readable directory

    tomcat通过eclipse发布项目到webapp后  手动删除在webapp目录下的文件,启动tomcat时,会报出异常找不到那个删除的项目. 解决方法是(1)重新发布项目到webapp (2)在 ...

  9. 在Ubuntu下编译WebKit源码--qt

    转载自:http://www.cnblogs.com/panderen/archive/2011/10/18/2216154.html 在朋友的介绍下有幸認识了WebKit这个让人心动的开源浏览器内核 ...

  10. 通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题

    通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题:用nginx来做webserver的时,上传大文件时需要特别注意client_max_body_si ...