[html][转]常用返回顶部代码
转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html
一、使用HTML的锚标记最简单了
但是唯一的缺点就是样式不怎么样,会显示这个锚标记。
<aname="top"id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。
页面底部放置:
<ahref="#top"target="_self">返回顶部</a>
二、使用Javascript Scroll函数返回顶部
scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:
方式1(推荐:简单方便):
<ahref="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。
方式2(注重效果:缓慢向上):
本方式是渐进式返回顶部,要好看一些,代码如下:
functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>
这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。
if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);
三、使用Onload加上scroll功能实现动态返回顶部
首先在网页body标签结束之前加上:
<divid="gotop">返回顶部</div>
2、再调用以下JS脚本部分:
BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.οnscrοll=set;btn.οnclick=function(){btn.style.display="none";window.οnscrοll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.οnscrοll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');
这些可以放到网页中中,也可以独立存成一个js文件,比如gotop.js,再通过以下形式:
<scriptsrc="/js/gotop.js"type=text/javascript></script>
来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设文件路径为JS,放在其它位置请根据实际修改。
转载于:https://www.cnblogs.com/luoxiaolei/p/5178046.html
[html][转]常用返回顶部代码相关推荐
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
- 网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
- 简单返回顶部代码及注释说明(转)
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
- 返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
- 隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
- JQ返回顶部代码分享~~~~
1.jq代码: <script type="text/javascript">$(function() {$("#tbox").click(scro ...
- 返回顶部酷炫小火箭发射代码
很酷炫哦,直接粘贴即可 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件_javascript技巧
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
- php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
最新文章
- Android中自定义checkbox样式
- java yii_一条路线不起作用(yii)
- PAT甲级1133 Splitting A Linked List:[C++题解]链表
- Winform中设置BackgroundWorker在取消时关闭后台进程
- github的基础使用
- linux制作openssl rpm,CentOS 7 定制 OpenSSL RPM 包
- windows环境下设置Redis自启动
- 【操作系统】中断和异常的比较
- 正则表达式的基本语法[转]
- 一个基于Node.js的本地快速测试服务器 1
- OPPO Reno造乐节落地重庆 华语乐坛十大金曲榜单公布
- 搜狗2020年测试工程师笔试题
- 大数据创业,数据哪里来?需要跨过几道坎?
- Scrapy教程经典实战【新概念英语】
- 各个CPU品牌介绍及散片和盒装CPU区别方法简介
- MT6761处理器介绍
- 数据中台:建立在数据网络效应之上的赛道
- 使用easywechat给关注公众号用户发消息
- 四级语法4——定语从句
- Merriam-Webster's Vocabulary Builder 学习笔记 Unit 18
热门文章
- war2 洛谷模拟赛day2 t3 状压
- HTML全面深入学习-用label获得焦点
- python爬虫下载文件到指定文件夹_python爬虫: 从 指定路径 爬取 文件
- 第五章 高级发布-订阅模式
- Qt4 在x86和arm平台上的一些配置
- 浅谈SpringMVC源码的SpringServletContainerInitializer的完整加载流程
- C/C++创建服务器和客户端的demo
- android studio 自动实现方法,Android Studio怎么自动实现所有的接口函数
- php不包含_php 正则 不包含某字符串的正则表达式
- QT 中QComboBox控件鼠标事件过滤