本文内容主要是网上参考收集，介绍四种简单的返回页面顶部代码，可以使用简单的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. Busybox的syslogd认识与使用

    关键词:rcS.start-stop-daemon.syslogd.syslog().klogd.klogctl().syslog.conf./dev/log.facility/level等等. sy ...

  2. 《Linux/UNIX系统编程手册》第63章 IO多路复用、信号驱动IO以及epoll

    关键词:fasync_helper.kill_async.sigsuspend.sigaction.fcntl.F_SETOWN_EX.F_SETSIG.select().poll().poll_wa ...

  3. 模型加速[tensorflow&tensorrt]

    在tensorflow1.8之后的版本中,tensorflow.contrib部分都有tensorrt的组件,该组件存在的意义在于,你可以读取pb文件,并调用tensorrt的方法进行subgraph ...

  4. Unable to start web server; nested exception is org.springframework.context.ApplicationContextException: Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.

    SpringBoot启动时的异常信息如下: "C:\Program Files\Java\jdk1.8.0_161\bin\java" ......... com.fangxing ...

  5. codeforces#1136 C. Nastya Is Transposing Matrices（找规律）

    题意:给出两个n*m的矩阵,每次操作可以让一个正方形矩阵行列交换.问,在无限次操作下,第一个矩阵能否变成第二个矩阵 分析:先把操作限定在2*2的矩阵中.这样对角线上的元素就可以随意交换.也就是说,如果 ...

  6. Django rest framework（8）---- 视图和渲染器

    django rest framework 之视图 序列化器    PagerSerialiser from rest_framework import serializers from api im ...

  7. 【ubuntu】Ubuntu 修改 Apache2 运行用户/用户组及修改方法

    我们在安装apache后,有时在上传文件的时候,提示没有权限或者是不可写,我们都会去查文件夹的权限.通过ls -l /var/www/html/website可以很直观的看出我们文件和文件夹的权限,d ...

  8. 基于MySQL的Activiti6引擎创建

    整个activiti6的搭建都是在spring boot2之上的,首先贴一下pom: <dependencies> <!-- 这是activiti需要的最基本的核心引擎 --> ...

  9. Nginx集群session管理的两种方式

    1.IP_HASH 修改nginx配置文件 实现非常简单,但是绑定在一个服务器上了,不能跨越多个服务. 2.redis管理 管理session信息的空间,需要修改tomcat配置文件 下载相应的red ...

  10. BZOJ 2200 道路与航线 (算竞进阶习题)

    dijkstra + 拓扑排序 这道题有负权边,但是卡了spfa,所以我们应该观察题目性质. 负权边一定是单向的,且不构成环,那么我们考虑先将正权边连上.然后dfs一次找到所有正权边构成的联通块,将他 ...