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满地跑的页面实际开发中,有啥用 ...
随机推荐
- luogu 1471
题意: 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差. 操作1:1 x y k ,表示将第x到第y项每项加上k,k为一实数. 操作2:2 x y ...
- python sqlite3查看数据库所有表(table)
#coding:utf-8 import sqlite3 ''' sqlite3存在系统表sqlite_master,结构如下: sqlite_master( type TEXT, #类型: ...
- Codeforces 982E Billiard exgcd
Billiard 枚举终点, 对于每一个终点一共有四种周期的相遇方式, 枚举一下取最小的时间. #include<bits/stdc++.h> #define LL long long # ...
- JavaSE| 面向对象-类的五大成员
面向对象 面向对象只是其中一种编程思想,还有很多其他的编程思想:面向过程.面向切面.面向服务编程... 面向过程的思维方式:注重步骤.过程,面向过程强调的是功能行为: 面向对象的思维方式:关注的是“对 ...
- 035 控制并发 select * from test1 where id =1 for update 就会对这行加锁了?
今天在看同事程序的时候,看到这种用法,顺便学习下. 一:理论 1.功能 这个功能是上锁. 上的是一个排它锁,也就是说,其他的事务是可以读取的.但是不能写入或者更新. 二:实践 1.创建表 2.提交一条 ...
- 004 Java的一次面试题,学长列举
据说是Java的面试题,感觉有些汗颜,所以决定研究一下. 1.线程.进程.协程的区别,他们怎么进行线程的交互? 2.k8s内的scheduler怎么做的,流程?跟etcd怎么交互? 3.hashmap ...
- 蓝桥杯 跳蚱蜢 (bfs)
转载自:https://blog.csdn.net/wayway0554/article/details/79715658 本题的解题关键就在于将蚱蜢在跳转换为盘子在跳. 当使用string当做每一个 ...
- JavaEE 之 WebService
1.WebService a.定义:WebService是一种跨编程语言和跨操作系统平台的远程调用技术 b.三大技术: XML+XSD,SOAP,WSDL c.SOAP协议 = HTTP协议 + XM ...
- HDU 2841-Visible Trees 【容斥】
<题目链接> 题目大意: 有一个农民,站在(0,0)点,从(1,1)点到(m,n)点每个点上有棵树,问这个农民能看到多少棵树.(如果多棵树在同一条直线上,那么他只能看到一颗) 解题分析: ...
- HDU 4027 Can you answer these queries【线段树】
<题目链接> 题目大意: 给定一段序列,现在对指定区间进行两种操作:一是对指定区间进行修改,对其中的每个数字都开根号(开根号后的数字仍然取整):二是对指定区间进行查询,查询这段区间所有数字 ...