HTML5商城开发五 实现返回页面顶部
本文内容主要是网上参考收集，介绍四种简单的返回页面顶部代码，可以使用简单的HTML锚标记，也可使用Javascript Scroll函数动态返回等等。
一、使用锚标记返回页面顶部
使用HTML锚标记最简单，点击后会在地址栏显示这个锚标记。
需要标记id特麻烦，尤其是每个页面都要使用，顶部展示又不一样。
页面顶部放置：
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。
页面底部放置：
<a href="#top" target="_self">返回顶部</a>
二、使用Javascript Scroll函数返回顶部
scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：
方式1：
- <a href="javascript:scroll(0,0)" mce_href="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。
方式2：
本方式是渐进式返回顶部，要好看一些，代码如下：
- function pageScroll() {
- window.scrollBy(0,-10);
- scrolldelay = setTimeout('pageScroll()',100);
- }
- <a href="pageScroll();" mce_href="pageScroll();">返回顶部</a>
这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。
- if(document.body.scrollTop==0) clearTimeout(scrolldelay);
三、使用Onload加上scroll功能实现动态返回顶部
1、首先在网页BODY标签结束之前加上：
<div id="gotop">返回顶部</div>
2、再调用以下JS脚本部分：
- BackTop=function(btnId){
- var btn=document.getElementById(btnId);
- var d=document.documentElement;
- window.onscroll=set;
- btn.onclick=function (){
- btn.style.display="none";
- window.onscroll=null;
- this.timer=setInterval(function(){
- d.scrollTop-=Math.ceil(d.scrollTop*0.1);
- if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
- },10);
- };
- function set(){btn.style.display=d.scrollTop?'block':"none"}
- };
- 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商城开发五 实现返回页面顶部的更多相关文章
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- 代码： 返回页面顶部 jquery
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现返回页面顶部功能。
<p id="back-to-top"> <span></span> </p> <script type="text ...
- （转）解决点击a标签返回页面顶部的问题
本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...
- 解决点击空<a>标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5商城开发一 楼层滚动加载数据
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...
- 仿CSDN Blog返回页面顶部功能
只修改了2个地方: 1,返回的速度-->改成了慢慢回去.(原来是一闪而返回) 2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS ...
随机推荐
- springboot为导出的pdf和excel加水印
相信很多小伙伴们在做导出pdf或者excel文件时会被要求在文件上加上水印,本篇博客就来讲讲如何为pdf和excel加水印. 导出pdf加水印 其实在导出pdf时加上水印并不难,因为itext提供了添 ...
- 1 vmware 如何联网，以及行命令令初步
VMware安装Linux(我安装的是ubuntu),没法上网,上网教程见:https://blog.csdn.net/qq_28090573/article/details/78730552 安装完 ...
- php函数 array_column
<?php $arr = [ [ 'id'=>1, 'name'=>'wang', 'age'=>10 ], [ 'id'=>2, 'name'=>'yong', ...
- NOIP2010提高组复赛C 关押罪犯
题目链接:https://ac.nowcoder.com/acm/contest/258/C 题目大意: 略 分析: 这题是并查集的一个变题,先按积怨值从大到小排序,然后一个一个看能否完全分开,遇到的 ...
- C#嵌入动态链接库到可执行文件
C#嵌入动态链接库到可执行文件 将需要被集成的程序集放在项目的lib文件夹中,引用路径从解决方案开始,以“.”连接. 如图(解决方案名称为莫非): 核心代码: AppDomain.CurrentDom ...
- 【XSY2990】树 组合数学 容斥
题目描述 同 Comb Avoiding Trees 不过只用求一项. \(n,k\leq {10}^7\) 题解 不难发现一棵 \(n\) 个叶子的树唯一对应了一个长度为 \(2n-2\) 的括号序 ...
- flex布局应用
flex介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div dis ...
- [python]获取当前路径用来构造相对路径的几种方法
print('getcwd', os.getcwd()) print('sysargv', sys.argv) print('realpath', os.path.realpath(sys.argv[ ...
- tty
tty一词源于Teletypes,或teletypewriters,原来指的是电传打字机,是通过串行线用打印机键盘通过阅读和发送信息的东西,后来这东西被键盘和显示器取代,所以现在叫终端比较合适. 终端 ...
- MFC（1）：vc6.0转vs2005出现的问题
在将vc6.0程序转换到vs2005或者vs2008.vs2010时提示:error C2440: 'static_cast' : cannot convert from 'UINT (__this ...