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 ...
随机推荐
- Photoshop调出清晰的阴雨天气山水风景照
既然我们前期拍摄到了一张效果还不错的照片,那么下一步就是通过后期处理得到最终的影像. 在处理之前,我们一定要做到胸有成竹,而不是盲目调整. 也就是说在还没调整照片的时候,就要计划和预想到最终的照片应该 ...
- 控制结构(10): 指令序列（opcode）
// 上一篇:管道(pipeline) // 下一篇:Continuation-passing_style(CPS) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编 ...
- HTTP状态码表
HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.所有状态码的第一个数字代表了响应的五种状态之一. 1xx消息 这一类型的状态码,代表请求已被 ...
- JMeter二次开发(1)-eclipse环境配置及源码编译
1.下载src并解压 http://jmeter.apache.org/download_jmeter.cgi 2.获取所需jar包,编译 ant download_jars ant instal ...
- 【深入Java虚拟机】之三：内存溢出
为了更直接的了解各区域,下面我们来看几个示例. 1.Java 堆溢出 下面的程中我们限制Java 堆的大小为20MB,不可扩展(将堆的最小值-Xms 参 数与最大值-Xmx 参数设置为一样即可避免堆自 ...
- 查看Android系统已安装应用的列表
可以通过adb shell pm list package 我们可以通过系统提供的工具pm来隐藏一些应用,比如:pm hide和pm disable pm disable <PACKAGE_OR ...
- 根据字段获取DataTable包含某个值的数据
dt.Select("身份证号='" + list[i].PersonalId + "' and 培训完成日期 like '" + year + "% ...
- [WC2018]通道——边分治+虚树+树形DP
题目链接: [WC2018]通道 题目大意:给出三棵n个节点结构不同的树,边有边权,要求找出一个点对(a,b)使三棵树上这两点的路径权值和最大,一条路径权值为路径上所有边的边权和. 我们按照部分分逐个 ...
- Android Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conflict with dependency
错误内容: Error:Execution failed for task ':app:preDebugAndroidTestBuild'.> Conflict with dependency ...
- hdu 1848 简单SG函数
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1848 Problem Description 任何一个大学生对菲波那契数列(Fibonacci num ...