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 ...
随机推荐
- SpringMVC项目读取不到外部CSS文件的解决办法及总结
昨天,在写一个新需求的时候,因为没有前端同事的对接,无奈只有自己写css,js放到ssm结构的后台项目中,因为之前开发都是把前端文件放在一个专门的服务器上,一直没有关注服务端项目读取静态资源的问题,运 ...
- Linux内存管理 (14)匿名页面生命周期
专题:Linux内存管理专题 关键词:匿名页面.换入.换出. 如果要将匿名页面的生命周期进行划分,大概就是诞生.使用.换出.换入和销毁. 内核中使用匿名页面的地方有很多,产生缺页中断之后匿名页面就诞生 ...
- 初识：java虚拟机的内存划分
什么是内存? 内存是计算机中的重要原件,临时存储区域,作用是运行程序.我们编写的程序是存放在硬盘中的,在硬盘中的程序是不会运行的,必须放进内存中才能运行,运行完毕后会清空内存.Java虚拟机要运行程序 ...
- Python的GIL机制与多线程编程
GIL 全称global interpreter lock 全局解释锁 gil使得python同一个时刻只有一个线程在一个cpu上执行字节码,并且无法将多个线程映射到多个cpu上,即不能发挥多个cpu ...
- OracleSql语句学习(三)
--在SELECT子句中出现的函数或表达式会在结果集中作为字段名,这样的可读性差,因此可以为--这样的字段添加别名(别名中不能出现空隔,除非是用双引号括起来的)--别名中如果希望包含空隔或者区分大小写 ...
- 使用.net core搭建文件服务器
标题之所以带上.net core,而不是.net就是由于两者在类库的使用以及部署环境有很大的差别,所以特此说明. 长话短说,直接开始! 1.新建一个.net core项目,版本是2.0,为了方便就建一 ...
- Linux Redhat 7.6 操作系统 下载安装详解
redhat 系统镜像分享 [百度网盘分享] (https://pan.baidu.com/s/1ALM6v1dAtPwmEt2tmyTghg ) 提取码:2i4o redhat 7.6版本安装详解 ...
- JVM内存区域详解
本文分为两部分:一是JVM内存区域的讲解:二是常见的内存溢出异常分析. 1.JVM内存区域 java虚拟机在执行java程序的过程中会把它管理的内存划分为若干个不同的数据区域,这些区域都有各自的用途, ...
- javaWeb1之Servlet
Servlet Servlet 环境设置 servlet是扩展web服务器功能的组件规范.浏览器发送请求给web服务器,如果是动态资源的请求,web服务器会将请求转发给servlet容器来处理(由容器 ...
- java垃圾回收GC
垃圾回收时,暂停虚拟机运行 基础假设:大部分对象只存在很短的时间 对于新生代,Minor GC经常会发生 Major/Full GC会对老生代做GC 老生代GC采用Compact算法,移动形成完整的空 ...