回到顶部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. JVM 方法区内存扩大 以及开启GC

    因为应用使用了OSGi框架,<深入理解JAVA虚拟机>中对使用OSGi时可能产生的方法区溢出有所描述 第一部分: 第二部分 可见,OSGi会动态生成大量Class,在OSGi中,即使是同一 ...

  2. Flask---第一个例子--使用Flask写的【Hello World !】的web程序

    from flask import Flask;------->引入Flask插件,pip install Flask; app=Flask(__name__) #变量app是Flask的一个实 ...

  3. BZOJ3230 相似子串 字符串 SA ST表

    原文链接http://www.cnblogs.com/zhouzhendong/p/9033092.html 题目传送门 - BZOJ3230 题意 给定字符串$s$.长度为$n$. 现在有$Q$组询 ...

  4. Ubuntu18.04上安装Docker CE

    建立 REPOSITORY 1.更新索引包 更新 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的地址,这样才能获取到最新的软件包 sudo ...

  5. JavaSE| 包装类| 时间

    包装类 * 因为Java是面向对象的语言,所以很多API或新特性都是针对“对象”来设计的,但是Java设计之初时,是C语言很盛行的时候,所以Java保留了C语言中的8种基本数据类型, 保留它们有好处, ...

  6. Spring错误小结

    之前在做项目的时候发现无法解析xml文件导致项目运行失败的问题,其实是无法找到导入的Schema约束,在配置Schema约束的时候在XML Catalog 中key配置*.xsd网址,location ...

  7. HDU 1385 Minimum Transport Cost (输出字典序最小路径)【最短路】

    <题目链接> 题目大意:给你一张图,有n个点,每个点都有需要缴的税,两个直接相连点之间的道路也有需要花费的费用.现在进行多次询问,给定起点和终点,输出给定起点和终点之间最少花费是多少,并且 ...

  8. HDU 1022 火车进站【栈】

     题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1022 题目大意: 题目大概意思:有N辆火车,以序列1方式进站,判断是否能以序列2方式出栈.进站不一定 ...

  9. jsonp突破浏览器同源策略

    jsonp突破浏览器同源策略 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  10. Spring BPP中优雅的创建动态代理Bean

    一.前言 本文章所讲并没有基于Aspectj,而是直接通过Cglib以及ProxyFactoryBean去创建代理Bean.通过下面的例子,可以看出Cglib方式创建的代理Bean和ProxyFact ...