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. shell $() vs ${}

    reference $( )与` `(反引号)都是用来做命令替换(command substitution)用的 run command 3, 2, 1 command1 $(command2 $(c ...

  2. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  3. LNOI2019划水记

    十二省联考命题组温馨提醒您: 数据千万条,清空第一条. 多测不清空,爆零两行泪. NOIp2018差点退役的游记 $Flag$拔了. $LNOI2019$划水记: $Day0$: 早上八点起床,一直颓 ...

  4. IDEA下maven工程的classpath

    IDEA开发maven项目,此工程的classpath就是指src/main/java,src/main/resources,src/main/webapp,假如在main文件夹下新建一个文件prop ...

  5. Django框架基础知识04-模板标签与模板继承

    1.常用的模板标签 -作用是什么? -常用标签 总结:语法 {% tag %} {% endtag %} {% tag 参数 参数 %} 2.模板的继承与引用 -引用 include标签 -继承 ex ...

  6. 杭电 2141 Can you find it? （二分法）

    Description Give you three sequences of numbers A, B, C, then we give you a number X. Now you need t ...

  7. 为什么在属性中设置private set

    引言: 属性的引入来自C#的封装机制,也就是说对象的内部数据不应该由对象实例来直接访问,我们可以使用传统的Get和Set方法,来封装字段,C#为我们提供了语法糖,也就是属性.属性包括get和set,分 ...

  8. linux中的vi命令

    linux的重要的几个命令如下: ①,光标的操作 1,gg,G,nG,:n gg移到文档的开头一行,G移动到最后一行,nG移动到第n行,到指定的行. 2,H,M,L 光标分别移动到这个界面的最上边,中 ...

  9. （二）java集合框架综述

    一集合框架图 说明:对于以上的框架图有如下几点说明 1.所有集合类都位于java.util包下.Java的集合类主要由两个接口派生而出:Collection和Map,Collection和Map是Ja ...

  10. 使用using current logfile实现DG备库实时更新

    DG1是主库,DG2是备库:运行在最大可用模式. 实验一:未使用using current logfile参数时,备库在最大可用模式下,不能实时同步备库的更新 -此时需要等待主库进行归档---侧面证明 ...