回到顶部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的几种返回顶部的更多相关文章

  1. spring boot 搭建web项目常见五种返回形式

    在web项目中一般常见的五种返回形式: 返回页面,使用模板引擎,spring boot推荐使用thymeleaf,类似的还有freemarker等. 返回字符串(json),一般用于完全的前后端分离开 ...

  2. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  3. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  4. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  5. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  6. a超链接之返回顶部的两种实现方法

    1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id&quo ...

  7. 【微信小程序】实现类似WEB端【返回顶部】功能

    1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...

  8. WEB前端--返回顶部特效源码

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

随机推荐

  1. 常用js正则表达式大全

    常用js正则表达式大全.一.校验数字的js正则表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和 ...

  2. Flink的容错

    checkpoint介绍 checkpoint机制是Flink可靠性的基石,可以保证Flink集群在某个算子因为某些原因(如 异常退出)出现故障时,能够将整个应用流图的状态恢复到故障之前的某一状态,保 ...

  3. 牛客挑战赛30 小G砍树 树形dp

    小G砍树 dfs两次, dp出每个点作为最后一个点的方案数. #include<bits/stdc++.h> #define LL long long #define fi first # ...

  4. spark学习之路1--用IDEA编写第一个基于java的程序打包,放standalone集群,client和cluster模式上运行

    1,首先确保hadoop和spark已经运行.(如果是基于yarn,hdfs的需要启动hadoop,否则hadoop不需要启动). 2.打开idea,创建maven工程.编辑pom.xml文件.增加d ...

  5. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第五集之网络配置】

    还有对第五集的补充:https://www.cnblogs.com/lirenhe/p/10405069.html 1,如果不为这个linux系统或者这台虚拟机配置IP,就不能实现通信.这样的之后安装 ...

  6. thinkphp5控制器

    // 定义应用目录 define('APP_PATH', __DIR__ . '/../app/'); // 定义配置文件目录和应用目录同级 define('CONF_PATH', __DIR__.' ...

  7. Selenium+PhantomJS使用时报错原因及解决方案(转)

    Selenium+PhantomJS使用时报错原因及解决方案     问题 今天在使用selenium+PhantomJS动态抓取网页时,出现如下报错信息: UserWarning: Selenium ...

  8. HDU4578 Transformation【线段树】

    <题目链接> <转载于 >>> > 题目大意: 有一个序列,有四种操作: 1:区间[l,r]内的数全部加c. 2:区间[l,r]内的数全部乘c. 3:区间[l ...

  9. 001.Linux开机启动过程

    相关Linux启动过程解析,此作为通用启动参考:

  10. 给有C或C++基础的Python入门 :Python Crash Course 4 操作列表 4.4 -- 4.5

    上接前一篇文章. 4.4 使用列表的一部分 一,切片 切边,顾名思义,就是处理列表的部分元素. 我们可以联系一下C++的一段语句:for(int i = 0; i < n-2; ++i) cou ...