js实现回到顶部功能

一、总结

一句话总结：

可以通过js或者jquery可以很快的控制页面的属性，比如高度等等
    //设置当前视口的顶端数值

    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;

            }

        }

    }

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

转自或参考：【JavaScript Demo】回到顶部功能实现
https://www.cnblogs.com/yc-755909659/p/5988005.html

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

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;

            }

        }

    }

};

现在的效果如下：

 

js实现回到顶部功能的更多相关文章

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

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

  2. JS实现回到顶部效果

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

  3. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  4. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

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

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

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

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

  7. jquery javascript 回到顶部功能

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

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

随机推荐

  1. 用python 打印出爱心

    其实,如果程序员真的很浪漫,普通人不懂,科技兴旺,也许你是惊呆了!!!!! 今天,泰泰又给你带来了一个“程序员技术(浪漫)表现”教程.飞鲸水龙头有希望它能在这个七月前夜帮到你.如果使用成功,记得给泰泰 ...

  2. time 时间模块的函数调用

    时间模块 time 此模块提供了时间相关的函数,且一直可用 时间简介 公元纪年是从公元 0000年1月1日0时开始的 计算机元年是从1970年1月1日0时开始的,此时时间为0,之后每过一秒时间+1 U ...

  3. Java中Static关键字详解以及静态变量和成员变量的区别

    一.static关键字的特点 (1)修饰成员变量.成员方法(2)随着类的加载而加载(3)优先于对象存在(4)被所有对象共享(5)可以通过类名调用 它本身也可以通过对象名调用 例如:main()方法由j ...

  4. LoadRunner（7）

    一.参数化策略 1.Select next row(How? 如何取?)取值方式 选择下一行 1)Sequential:顺序的 每个VU都从第一行开始,顺序依次向下取值: 数据取完可以从头循环重复使用 ...

  5. Some ML Tutorials

    VAE: What-is-variational-autoencoder-vae-tutorial Variational-autoencoders-explained Building variat ...

  6. 美团面经-java开发

     美团(1)1 1 2 3 5 8...,求第n项写了个递归,面试官问了两个,n＝-1,和极限最大值情况下怎么办.我回答,会导致栈的内存空间溢出.又问了,在栈里会是个怎样的过程.(2)打开摩拜单车页面 ...

  7. MySQL No Install zip安装方法

    解压 解压安装包到一个目录,比如:D:\Database\mysql-5.1.55 配置 创建配置文件 创建一个my.ini文件,MYSQL目录下有几个my开头的ini文件,是针对不同配置使用,具体可 ...

  8. [原创]在Windows平台使用msys2、mingw64和vscode编写和调试C/C++代码

    相关名词就不解释了,这里主要讲讲在vscode里怎么配,这里假设大家相关工具已经装好. 题外话:里面的大多数坑都是windows平台和linux平台的差异造成的,如果在linux平台配置,应该会顺利很 ...

  9. Caused by: com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResourcePool@1483de4 -- timeout at awaitAvailable(

    Caused by: com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire ...

  10. Eclipse中使用Maven的Jetty插件Debug Web项目

    1.环境配置 JAVA_HOME=D:\Program Files\Java\jdk1.7.0_80 JRE_HOME=%JAVA_HOME%\jre CLASSPATH=.;%JAVA_HOME%/ ...