回到顶部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. 记录一次因代理Controller产生的404问题

    spring 3.2.4 为了给每一个controller配置一个拦截器链 import com.google.common.collect.Lists; import org.aopalliance ...

  2. JVM 方法区内存扩大 以及开启GC

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

  3. [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

  4. Oracle Client(客户端) 安装与配置

    因为工作需要,需要通过本地oracle客户端将数据导入到远程服务器上的oracle数据库中.从csdn下了很多oracle客户端,都是属于精简版,缺少imp.exe文件,造成无法导入数据.所以最终从o ...

  5. 线程 ID

    摘自<Linux 环境编程:从应用到内核> 在 Linux 中,目前的线程实现是 Native POSIX Thread Library,简称 NPTL.在这种实现下,线程又被称为轻量级进 ...

  6. JS获取地址栏的参数值

    function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)( ...

  7. 【bzoj3717】[PA2014]Pakowanie 状压dp

    题解: 自己在这一类问题上想到的总是3^n的枚举法 首先背包从大到小排序 f[i]表示搞出为i的状态至少要用几个背包,g[i]表示最大剩余容量 这样就可以2^n*n 因为这么做利用了状态之间的先后顺序 ...

  8. 【BZOJ1778】[Usaco2010 Hol]Dotp 驱逐猪猡

    题解: 网上有一种复杂的方法..好像复杂度并没有优势就没看 定义f[i]表示i的期望经过次数,f[i]=sigma{f[j]*p/q/du[j]}+(i==1); 然后高斯消元就可以了 最后求出来的f ...

  9. nginx 日志 cron任务切割日志

    #vim cut_nginx_log.sh #cd /usr/local/nginx/logs/ #/bin/mv access.log access_$(date +%F).log #/usr/lo ...

  10. springmvc基础使用配置

    前言 本案例是在idea编辑器下,maven管理项目的前提下. 步骤 1.新建maven项目 2.配置web.xml <?xml version="1.0" encoding ...