本文内容主要是网上参考收集，介绍四种简单的返回页面顶部代码，可以使用简单的HTML锚标记，也可使用Javascript Scroll函数动态返回等等。

一、使用锚标记返回页面顶部

使用HTML锚标记最简单，点击后会在地址栏显示这个锚标记。

需要标记id特麻烦，尤其是每个页面都要使用，顶部展示又不一样。

页面顶部放置：

<a name="top" id="top"></a>

放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。

页面底部放置：

<a href="#top" target="_self">返回顶部</a>

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：

方式1：

[javascript] view plaincopy
  1. <a href="javascript:scroll(0,0)" mce_href="javascript:scroll(0,0)">返回顶部</a>

scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。

方式2：

本方式是渐进式返回顶部，要好看一些，代码如下：

[javascript] view plaincopy
  1. function pageScroll() {
  2. window.scrollBy(0,-10);
  3. scrolldelay = setTimeout('pageScroll()',100);
  4. }
  5. <a href="pageScroll();" mce_href="pageScroll();">返回顶部</a>

这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。

[javascript] view plaincopy
  1. if(document.body.scrollTop==0) clearTimeout(scrolldelay);

三、使用Onload加上scroll功能实现动态返回顶部

1、首先在网页BODY标签结束之前加上：

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

2、再调用以下JS脚本部分：

[c-sharp] view plaincopy
  1. BackTop=function(btnId){
  2. var btn=document.getElementById(btnId);
  3. var d=document.documentElement;
  4. window.onscroll=set;
  5. btn.onclick=function (){
  6. btn.style.display="none";
  7. window.onscroll=null;
  8. this.timer=setInterval(function(){
  9. d.scrollTop-=Math.ceil(d.scrollTop*0.1);
  10. if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
  11. },10);
  12. };
  13. function set(){btn.style.display=d.scrollTop?'block':"none"}
  14. };
  15. BackTop('gotop');

对Z-BLOG而言，可以放到$(document).ready(function(){....函数中，也可以独立存成一个js文件，比如gotop.js，再通过：

<SCRIPT src="/js/gotop.js" type=text/javascript></SCRIPT>

来调用，当然了位置最好放在“返回顶部”标签的下面，该调用方法已假设路径为JS，其它位置请自行修改。

四、以一定的速度滑动返回顶部

$(".totop").click(function () {

        var speed = ;//滑动的速度

        $('html,body').animate({ scrollTop:  }, speed);//去顶部
        $('html,body').animate({ scrollTop: $('#footer').offset().top }, speed);//去底部 
});

最喜欢这种效果，简单又能动态往上滚动。

主要参考：

http://www.mediacollege.com/internet/javascript/page/scroll.html

http://blog.csdn.net/w3031213101/article/details/6363858

HTML5商城开发五 实现返回页面顶部的更多相关文章

  1. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  2. 代码： 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  3. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  4. 解决点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  6. （转）解决点击a标签返回页面顶部的问题

    本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...

  7. 解决点击空<a>标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  9. 仿CSDN Blog返回页面顶部功能

    只修改了2个地方: 1,返回的速度-->改成了慢慢回去.(原来是一闪而返回) 2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS ...

随机推荐

  1. Luogu5176 公约数 莫比乌斯反演、线性筛

    传送门 好像是我们联考时候的题目? 一个结论:\(\gcd(ij,ik,jk) \times \gcd(i,j,k) = \gcd(i,j) \times \gcd(i,k) \times \gcd( ...

  2. iis+nginx实现负载均衡

    简要说明:nginx的简介自行百度. 目的:把用户的请求分到各个服务器减轻压力.nginx把监听的端口的请求平均转到布署了网站的服务器. 一.windows上安装nginx 1.官网下载windows ...

  3. Java 200+ 面试题补充② Netty 模块

    让我们每天都能看到自己的进步.老王带你打造最全的 Java 面试清单,认真把一件事做到最好. 本文是前文<Java 最常见的 200+ 面试题>的第二个补充模块,第一模块为:<Jav ...

  4. Java JPA @Transient 在Hibernate中应用

    jpa @Transient - 走过程序员的路 - CSDN博客https://blog.csdn.net/lafengwnagzi/article/details/55511066 Hiberna ...

  5. SpringMVC DispatcherServlet在配置Rest url-pattern的一点技巧

    SpringMVC的Controller中已经有了@RequestMapping(value = "detail.do", method = RequestMethod.GET)的 ...

  6. iOS高德地图让指定区域或者点显示在屏幕中间

    对于高德地图也是一个新手,很多功能看文档,问技术 或者高德群里讨论  群号:204668425 在我们需求中绘制的有 圆 折线 不规则图形 方式,打开地图指定的绘制图形置于屏幕中间 1.首先创建一个数 ...

  7. JarvisOJ Basic 握手包

    得到的是一个.cap文件,我看着好像可以用wireshark打开,就试了一下 报错了,pcapfix上,得到了一个新的.cap文件,用wireshark打开,发现分析不出来 查了一下,有破解握手包的专 ...

  8. 中国剩余定理 CRT

    中国剩余定理 CRT 正常版本CRT 要解的是一个很容易的东西 \[ \begin{aligned} x\equiv a_1(mod\ m_1)\\ x\equiv a_2(mod\ m_2)\\ . ...

  9. 帝国cms打开慢

    发现有个站(http://www.953239.com/)打开很慢,改了php版本后,快了一倍

  10. [SHOI2008]仙人掌图 II——树形dp与环形处理

    题意: 给定一个仙人掌,边权为1 距离定义为两个点之间的最短路径 直径定义为距离最远的两个点的距离 求仙人掌直径 题解: 类比树形dp求直径. f[i]表示i向下最多多长 处理链的话,直接dp即可. ...