web的几种返回顶部
回到顶部backtoTop 滚动回到顶部 jquery/js效果还不错!支持现代浏览器包括 ie6。position: absolute;和fixed.两种方法!
一,jQuery方法的backtoTop:
CSS:
.backtoTop1 {
height: 100px;
width: 100px;
/* 固定定位 */
position: fixed;
padding-top: 8px;
right:;
bottom:;
display: none;
z-index:;
background: red;
}
JavaScript:
//滚动时触发
$(window).scroll(function() {
//获取滚动条到顶部的垂直高度
var sc = $(window).scrollTop();
if(sc > 0) {
$("#backtoTop1").stop().show();
} else {
$("#backtoTop1").stop().hide();
}
});
$("#backtoTop1").click(function() {
$('body,html').animate({
scrollTop: 0
});
});
二,js方法的backtoTop:
CSS:
.backtoTop2 {
height: 100px;
width: 100px;
position: fixed; //固定定位
padding-top: 8px;
right: 200px;
bottom:;
display: none;
z-index:;
background: red;
cursor: pointer;
text-align: center;
color: #fff;
line-height: 100px;
}
JavaScript:
// 给window注册滚动监听事件
window.onscroll = function(){
// 获取返回顶部的按钮
var toTop = document.getElementById('backToTop2');
// 获取滚动条距离页面顶部的距离
var topH = document.documentElement.scrollTop || document.body.scrollTop;
// 判断当滚动条距离页面顶部300px时显示出来
if (topH > 300) {
toTop.style.display = 'block';
} else {
toTop.style.display = 'none';
}
// 给返回顶部的按钮注册一个点击事件
toTop.onclick = function(){
// 页面滚动到left:0和top:0的位置;
window.scrollTo(0, 0);
}
}
以上方法仅供参考?
web的几种返回顶部的更多相关文章
- spring boot 搭建web项目常见五种返回形式
在web项目中一般常见的五种返回形式: 返回页面,使用模板引擎,spring boot推荐使用thymeleaf,类似的还有freemarker等. 返回字符串(json),一般用于完全的前后端分离开 ...
- WEB返回顶部效果
1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- javascript返回顶部几种代码总结
纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...
- Web前端 页面功能——点击按钮返回顶部的实现方法
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- a超链接之返回顶部的两种实现方法
1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id&quo ...
- 【微信小程序】实现类似WEB端【返回顶部】功能
1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...
- WEB前端--返回顶部特效源码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
随机推荐
- Git坑换行符自动转换 [转载]
转自https://www.cnblogs.com/zjoch/p/5400251.html 源起 一直想在 GitHub 上发布项目.参与项目,但 Git 这货比较难学啊.买了一本<Git 权 ...
- [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- 【bzoj4976】宝石镶嵌
题解: 比较水 注意k<=100这个条件 当n-k比较大的时候 我们显然会把它有的位都给取了 不然的话我们可以考虑dp 暴力状压就可以了 代码: #include <bits/stdc++ ...
- NEST 中的距离单位
Distance units Version: 5.x 英文原文地址:Distance units 当我们需要指定距离时(地理位置查询),可以使用一个双精度的数字来表示,它的默认单位是米(meters ...
- day8.python文件操作
打开和关闭文件 open函数 用Python内置的open()函数打开一个文件,创建一个file对象,相关的方法才可以调用它进行读写. file = open(file_name [, access_ ...
- http--tomcat--memcached配置
两个tomcat节点:172.16.100.7(tomcatA.magedu.com),172.16.100.8(tomcatB.magedu.com) 两个memcached节点:172.16.10 ...
- 2018牛客网暑假ACM多校训练赛(第十场)F Rikka with Line Graph 最短路 Floyd
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round10-F.html 题目传送门 - https://www.n ...
- BZOJ3295 [Cqoi2011]动态逆序对 分治 树状数组
原文链接http://www.cnblogs.com/zhouzhendong/p/8678185.html 题目传送门 - BZOJ3295 题意 对于序列$A$,它的逆序对数定义为满足$i< ...
- P1052 过河 线性dp 路径压缩
题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...
- weka的基本使用
目录: 1. 简介 2.界面初识 3.数据格式 4.数据准备 5.关联规则 6.分类与回归 7.聚类分析 8.Weka相关资料 9.Weka二次开发 10.Weka源代码导入 1. 简介 WEKA的全 ...