本文内容主要是网上参考收集，介绍四种简单的返回页面顶部代码，可以使用简单的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. 如何在Jupyter里以不同的运行模式使用Pyspark

    假设你的环境已经安装好了以下东西,如何详细的安装它们不在本文的讨论范围之内 具体的可疑参考三分钟搞定jupyter和pyspark整合 anaconda2 findspark pyspark 这里多说 ...

  2. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  3. 玩转3D Swiper美女性感秀之思路分析总结

    前言 继一次的3D魔方之后,这次利用CSS3的transform.translate.rotate.preserve-3d等结合JS的requestAnimationFrame.class带你一起玩转 ...

  4. 判断语句之单if

    什么是判断语句? 给定一个判断条件,并在程序执行过程中判断该条件是否成立,根据判断结果执行不同的操作,从而改变代码的执行顺序,实现更多的功能,这就是判断语句. 判断语句if if语句第一种格式:if  ...

  5. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  6. threejs 初识

    用于展示3D动效,就是 跟拍电影一样,需要有3大模块:scene,camera,renderer. scene:场景,用于放置用到的模型. camera:摄像机,拍电影似的,得有个摄像机. rende ...

  7. PS快速祛除脸上小雀斑

    首先我们要把图片放到PS软件中,然后在PS左侧工具栏中找到污点修复画笔工具(J), 配合着污点修复画笔中的修补工具一起使用,注意:模式要选择正常,属性栏中类型要选择内容识别. 下一步我们需要在图层上添 ...

  8. Teching Yourself Programming in Ten Years -Peter Norvig

    http://norvig.com/21-days.html 我们经常能看到“7天搞定51单片机”.“21天学会C++”这样样式的标题,编程真的很容易吗?似乎比其他事情要简单很多呀!是的,糟糕的编程确 ...

  9. ABP中的拦截器之EntityHistoryInterceptor

    今天我们接着之前的系列接着来写另外一种拦截器EntityHistoryInterceptor,这个拦截器到底是做什么的呢?这个从字面上理解是实体历史?这个到底是什么意思?带着这个问题我们来一步步去分析 ...

  10. eclipse(STS)安装jd-eclipse插件实现查看API源代码功能

    emmm,IDEA确实是比STS智能很多,不过适当的转化也是需要的,这里介绍一下eclipse(STS)实现查看class反编译的源文件的功能 去Java Decompiler官网下一下eclipse ...