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 ...
随机推荐
- 在Mac OS X中完善PHP环境：memcache、mcrypt、igbinary
本文环境: Mac OS X 10.8.5 Xcode 5.0 Mac OS X升级到10.8.5之后,内置的Apache升级到2.2.24,PHP升级到了5.3.26.本文以此环境为基础. 本文简介 ...
- IDEA远程调试监控端口
大家知道,线上环境定位问题不是那么简单的,如果有非常完善的日志以及监控系统是不必担心的,但是应对这些并不完善的场景下,IDEA提供了一种远程调试的功能,remote集成了可以远程调试的功能,只需要在你 ...
- L2-2 小字辈 （25 分)
本题给定一个庞大家族的家谱,要请你给出最小一辈的名单. 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见,我们把家族成员从 1 到 N 编号.随后第二行 ...
- Java面试准备之多线程
什么叫线程安全?举例说明 多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些线程将如何交替执行,并且在主调代码中不需要任何额外的同步或者协同,这个类都能表现出正确的行为,那么就称这个类是线程 ...
- 基于 HTML5 结合互联网+的电力接线图
前言 “互联网+”思维让数据的搜集和获取更加便捷,并且随着大数据的深度开发和应用,数据分析预测对于提升用户体验有非常重要的价值,同时也为不同行业.不同领域的合作提供了更广阔的空间.传统的发电企业是一个 ...
- PS快速调出天蓝色清新外景
原片: 一.调整光比 曝光 黑白灰. 二.调整色温(新手可用白平衡工具.左上角第3个)调整饱和度(自然饱和度和蓝原色) 三.互补色的运用(高光偏黄 加的蓝色 暗部发蓝青色 加的橙黄色) 四.调整好照片 ...
- xshell中进入PLSQL命令不能使用方向键和退格键的做法（输入后显示乱码）
解决输入退格键为乱码的情况 输入时可以ctrl+backspace进行强制退格,或者使用下面一种方法: 在xshell的连接属性中配置,如下图红圈部分: 彻底解决方向键和退格键的一种办法(未亲测) ...
- Centos下安装Mysql异常
问题1: [root@localhost install-files]# rpm -ivh MySQL-server-5.6.27-1.el6.x86_64.rpm --nosignaturePrep ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 第六十三天 js基础
一.JS三个组成部分 ES:ECMAScript语法 DOM:document对象模型=>通过js代码与页面文档(出现在body中的所有可视化标签)进行交互 BOM:borwser对象模型=&g ...