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. luogu P2078 朋友

    题目背景 小明在A公司工作,小红在B公司工作. 题目描述 这两个公司的员工有一个特点:一个公司的员工都是同性. A公司有N名员工,其中有P对朋友关系.B公司有M名员工,其中有Q对朋友关系.朋友的朋友一 ...

  2. Ubuntu16.04进入无限登录状态的解决办法

    具体来说就是,输入密码之后又到了登录界面,无限循环(也许可能不能输入密码,这种状态我没有测试) 此方案仅适用于安装过NVIDIA显卡驱动的系统并且在登录界面会发现分辨率变了 如果你没有安装过NVIDI ...

  3. python接口自动化-token参数关联登录（登录拉勾网）

    前言 登录网站的时候,经常会遇到传token参数,token关联并不难,难的是找出服务器第一次返回token的值所在的位置,取出来后就可以动态关联了 登录拉勾网 1.先找到登录首页https://pa ...

  4. URI跟URL的区别

    关于URL和URI的区别,个人见解.    初学java,最近被一个概念搞得头晕脑胀,就是url和uri的概念和区别,网上查了一大通,发现各种回答眼花缭乱,有百科直接粘贴的,有胡说八道的,有故意绕来绕 ...

  5. Oracle中有关字符串操作的语法

    Oracle中有关字符串操作的语法 Oracle提供了丰富的字符串函数 lpad()函数 lpad()函数用于左补全字符串.在某些情况下,预期的字符串为固定长度,而且格式统一,此时可以考虑使用lpad ...

  6. [Istioc]Istio部署sock-shop时rabbitmq出现CrashLoopBackOff

    因Istio官网自带的bookinfo服务依赖关系较少,因此想部署sock-shop进行进一步的实验. kubectl apply -f <(istioctl kube-inject -f so ...

  7. hdu 2845简单dp

    /*递推公式dp[i]=MAX(dp[i-1],dp[i-2]+a[j])*/ #include<stdio.h> #include<string.h> #define N 2 ...

  8. UVA12345 (带修改的莫队)

    UVA12345 Dynamic len Problem : 给一个序列,每次询问一个区间里面的数字种类数量,或者修改某一个位置的值. Solution : 第一关键字分块排序左端点,第二关键字分块排 ...

  9. 把excel导入到mysql中

    方法很多,不过建议你先看看mysql的开发文档,里面写的很详细的,如果你懒得看,可以看下面的 1.有个软件PHP Excel Parser Pro v4.2可以 2.可将Excel存成csv格式.然后 ...

  10. Drainage Ditches--hdu1532(网络流 模板)

    http://acm.hdu.edu.cn/showproblem.php?pid=1532 Drainage Ditches Time Limit: 2000/1000 MS (Java/Other ...