html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结
这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结。本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文。
最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料.
第一种:引用外部jQuery
新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果.
doc
.arrow{
border: 9px solid transparent;
border-bottom-color: #3DA0DB;
width: 0px;
height: 0px;
top:0px
}
.stick{
width: 8px;
height: 14px;
border-radius: 1px;
background-color: #3DA0DB;
top:15px;
}
#back_top div{
position: absolute;
margin: auto;
right: 0px;
left: 0px;
}
#back_top{
background-color: #dddddd;
height: 38px;
width: 38px;
border-radius: 3px;
display: block;
cursor: pointer;
position: fixed;
right: 50px;
bottom: 100px;
display: none;
}
$(function(){
for(var i =0 ;i <100;i++){
$("#article").append("
xxxxxxxxxx
")
}
})
$(function(){
$(window).scroll(function(){ //只要窗口滚动,就触发下面代码
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
if( scrollt >200 ){ //判断滚动后高度超过200px,就显示
$("#back_top").fadeIn(400); //淡入
}else{
$("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
}
});
$("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$("html,body").animate({scrollTop:"0px"},200);
});
});
第二种:使用css及特殊图标进行设置
全代码打造简洁美观回到顶部按钮,同上,将代码复制进HTML文件中,打开即可看到效果.
doc
#back_top{
display:block;
width:60px;
height:60px;
position:fixed;
bottom:50px;
right:40px;
border-radius:10px 10px 10px 10px;
text-decoration:none;
display:none;
background-color:#999999;
}
#back_top span{
display:block;
width:60px;
color:#dddddd;
font-size:40px;
text-align:center;
margin-top:4px;
}
#back_top span:hover{
color:#cccccc;
}
⌆
html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结相关推荐
- 网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
- 返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
- bash shell函数中返回任意值的四种方法
From: http://www.jbxue.com/article/11322.html 本文介绍下,在bash shell编程中,从函数中返回任意值的几种方法,有需要的朋友参考下. 在bash中, ...
- c++语言定义排序函数,关于C++中定义比较函数的三种方法小结
C++编程优与Pascal的原因之一是C++中存在STL(标准模板库).STL存在很多有用的方法. C++模板库中的许多方法都需要相关参数有序,例如Sort().显然,如果你想对一个集合进行排序,你必 ...
- python字典取值_python 字典中取值的两种方法小结
python 字典中取值的两种方法小结 如下所示: a={'name':'tony','sex':'male'} 获得name的值的方式有两种 print a['name'],type(a['name ...
- python取整的几种方法,Python中取整的几种方法小结
Python中取整的几种方法小结 前言 对每位程序员来说,在编程过程中数据处理是不可避免的,很多时候都需要根据需求把获取到的数据进行处理,取整则是最基本的数据处理.取整的方式则包括向下取整.四舍五入. ...
- html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮 现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...
- 防止页面刷新过多js_JavaScript多种页面刷新方法小结
1,reload 方法 该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...
- html锚点怎么返回顶部,滑动效果的返回顶部锚点按钮
'TOP'置顶链接,说的通俗一点就是'返回顶部的链接','go to top '一般都放在页面的底部,它可以快速返回页面顶部,以节省用户浏览页面的时间. 它主要的应用场景是 当你有一个很长的网页内容时 ...
最新文章
- 【Spring】【JUnit】单元测试
- 网络生活点滴 网络管理实用8招技巧
- 神策专访丨摩天轮票务陈校校:在线票务平台精准营销之道
- 光辉之章事件有哪些常规操作?天谕手游事后的补偿真的很安慰?
- 疯狂ios讲义疯狂连载之实现游戏逻辑(2)
- php面试宝典1000题,【PHP面试宝典1000题】HTTP中的请求头(深圳小美网络科技)
- python实例 95,96
- Rand7()实现Rand10()
- esp8266时钟_ESP8266(Non-OS SDK) 驱动 waveshare 2.9 寸墨水屏(二)- 程序移植、修改与测试
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证....
- facebook轮播视频_如何设置Facebook Messenger Messenger视频通话
- linux 内核kenel优化方案一 -O3编译 Makefile
- Java学习决心计划书
- ANSI 标准是为了确保 C++ 的便携性
- 【学习笔记】Python编程,从入门到实践(自学python心路历程及学习笔记整理)
- Hibernate 参数查询
- 公司要收我的毕业证书,这合法吗
- Oracle DBA技术培训
- Codeforces Round #495 C. Sonya and Robots
- mybatis-plus 主键自增问题