js

<!DOCTYPE html>

<html>

<head>

<title>返回顶部</title>

<style>

body{margin:0; padding:0}

#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center;  background:#06c; position:absolute; cursor:pointer; color:#fff}

</style>

<script>

window.onload = function(){

  var oTop = document.getElementById("to_top");

  var screenw = document.documentElement.clientWidth || document.body.clientWidth;

  var screenh = document.documentElement.clientHeight || document.body.clientHeight;

  oTop.style.left = screenw - oTop.offsetWidth +"px";

  oTop.style.top = screenh - oTop.offsetHeight + "px";

  window.onscroll = function(){

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

    oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";

  }

  oTop.onclick = function(){

    document.documentElement.scrollTop = document.body.scrollTop =0;

  }

}  

</script>

</head>

<body style="height:1000px;">

<h1>返回顶部</h1>

<div id="to_top">返回顶部</div>

</body>

</html>

要点一：document.documentElement.clientWidth || document.body.clientWidth； 获得可视区的宽度。

后面是兼容chrome。前面是兼容其他浏览器。

要点二：oTop.style.left = screenw - oTop.offsetWidth +"px";  当页面载入时。让元素的位置位于页面最右边。用可视区的宽度减去元素本身的宽度。

要点三：oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px"; 当页面滚动时，元素的Y坐标位置等于可视区的高度减去元素本身的高度，加上滚动距离。

要点四：document.documentElement.scrollTop = document.body.scrollTop =0; 当点击元素时。让页面的滚动距离为0.写两个是为了兼容。

jquery

<html>

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script>

 $(function(){

         //当滚动栏的位置处于距顶部100像素下面时，跳转链接出现。否则消失

        $(function () {

             $(window).scroll(function(){

                 if ($(window).scrollTop()>100){

                     $("#back-to-top").fadeIn(1500);

                 }

                 else

                 {

                     $("#back-to-top").fadeOut(1500);

                 }

             });

            //当点击跳转链接后，回到页面顶部位置

            $("#back-to-top").click(function(){

                 $('body,html').animate({scrollTop:0},1000);

                 return false;

             });

         });

     });

 </script>

<body>

	<p>1</p>

	<p>2</p>

	<p>3</p>

	<p>4</p>

	<p>5</p>

	<p>6</p>

	<p>7</p>

	<p>8</p>

	<p>9</p>

	<p>10</p>

	<p>11</p>

	<p>12</p>

	<p>13</p>

	<p>14</p>

	<p>15</p>

	<p>16</p>

	<p>17</p>

	<p>18</p>

	<p></p>

<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>

</body>

</html>

js和jquery实现回到顶层的更多相关文章

  1. JS 实现 jQuery的$(function(){});

    1.浏览器渲染引擎的HTML解析流程 何谓“渲染”,其实就是浏览器把请求到的HTML内容显示出来的过程.渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成.下面是渲染引擎在取得内容之后 ...

  2. Js、Jquery对goTop功能的实现

    本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能,以及在这个过程中碰到的问题. 终于实现的效果类似:http://sc2.163.com/home(注意右下角的top) 代码: ...

  3. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  4. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  5. label用js，jquery取值赋值，以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  6. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  7. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  8. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  9. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

随机推荐

  1. Maven实战读书笔记（二）：Maven坐标与仓库

    2.1 Maven坐标 Maven坐标是Maven用来表示一个组件依赖的标示. Maven通过下面几个元素定义坐标:groupId.artifactId.version.packaging.class ...

  2. linux批量检测服务器能否ping通和硬盘容量状态并抛出报警的一个脚本-附详细解释

    有一些linux基础,最近刚开始学shell,参考了阿良老师的一个监测服务器硬盘状态的脚本,自己进行了一些扩展,今天比较晚了,后边会把注释放上来,感觉脚本还很不完善,希望大家一起探讨一下,共同学习 2 ...

  3. Python 模块学习（一）

    一.时间模块 import time # 模块调用语句 注意:模块级导入一般放在文件顶部 import datetime print(time.time()) # 1550411181.441547: ...

  4. 构造MaxTree

    链接:https://www.nowcoder.com/questionTerminal/a502c7c3c65e41fdaf65eec9e0654dcb 来源:牛客网 [编程题]构造MaxTree ...

  5. hdu 6201 transaction （最短路变形——带负权最长路）

    题意: 给定n个城市的货物买卖价格, 然后给定n-1条道路,每条路有不同的路费, 求出从某两个城市买卖一次的最大利润. 利润 = 卖价 - (买价 + 路费) 样例数据, 最近是从第一个点买入, 第4 ...

  6. angular2 启动步骤

    以下内容转自网络 1. 创建项目文件夹 创建一个新的文件夹来保存你的项目,比如一开始有个self就好了 2.安装基础库 首先确保已经安装了node.js 我们使用 npm package manage ...

  7. hexo干货系列：（一）hexo+gitHub搭建个人独立博客

    前言 一直想要一个自己的独立博客,但是觉得申请域名+服务器的太麻烦了就一直没有实现.偶然机会发现Hexo这个优秀的静态博客框架,再搭配现在流行的gitHub,简直是完美写博客的黄金搭档(免费+方便). ...

  8. kubernetes集群新增node

    kubernetes集群要新增node,首先要配置ssh免密登陆 root@ht:/etc/ansible# ssh-copy-id 172.18.196.6 /usr/bin/ssh-copy-id ...

  9. Linux（2）：基础命令

    linux 的规则: 1. linux 命令行组成结构:如下 [root@neo ~]# [用户名@主机名 当前工作路径]# ~ 用户的家目录 2. linux系统命令操作语法的格式(命令的样子): ...

  10. Java 学习（4）：基本数据类型，变量类型

    目录 --- 基本数据类型 --- 变量类型 基本数据类型 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用 ...