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. MySQL丨02丨忘记root用户密码怎么办?

    软件:Mysql 版本:8.0.13 1. 先暂停mysql的服务,方法是在cmd里输入如下代码: net stop mysql 2. 在安装文件夹下创建一个文件:mysql-ini.txt (我的安 ...

  2. 第三章：systemverilog文本值和数据类型

    1.增强的文本值 2.改进的`define文本替换 3.时间值 4.新的变量类型 5.有符号和无符号类型 6.静态和动态变量(***) 7.类型转换 8.常数 增强的文本值(文本赋值增强) 主要是:位 ...

  3. oracle如何重做日志组

    1.查询数据库中的重做日志组 SQL> select * from v$log; GROUP# THREAD# SEQUENCE# BYTES BLOCKSIZE MEMBERS ARC STA ...

  4. CEF与代理

    此文已由作者王荣涛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. CEF(Chromium Embedded Framework)如今已经广泛被应用于客户端软件,网易内部就有 ...

  5. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  6. 大数据学习——Hadoop第一天

    1.1 什么是HADOOP HADOOP是apache旗下的一套开源软件平台 HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 HADOOP的核心组件有 HD ...

  7. hexo干货系列：（八）hexo文章自动隐藏侧边栏

    前言 使用Jacman主题的时候发现打开具体文章后,侧边栏还是会展示,我想要的效果是自动隐藏侧边栏,并且展示目录.但是当我修改了主题配置文件里面close_aside属性为true的时候,发现侧边栏隐 ...

  8. HDU-1041-Computer Transformation,大数递推，水过~~

                                                                                  Computer Transformatio ...

  9. php实现设计模式————单例模式

    php实现设计模式————单例模式 什么是单例模式 为什么要使用单例模式 php中有哪些方式实现新建一个对象实例 如何阻止这种实例化实现理想的单例模式 代码实现 什么是单例模式 为什么要使用单例模式 ...

  10. Hihocoder #1067 : 最近公共祖先·二

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上上回说到,小Hi和小Ho用非常拙劣——或者说粗糙的手段山寨出了一个神奇的网站,这个网站可以计算出某两个人的所有共同祖先中 ...