<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>js+css实现置顶的效果</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        #top_div{

            position:fixed;

            bottom:190px;

            right:0;

            display:none;

            z-index: 5;

            width: 86px;

            height: 20px;

        }

    </style>

</head>

<body>

<div name="top" style="width: 100%;height: 1000px;background: papayawhip"></div>

<div id="top_div"><a href="#top"><img src="go-top.png"  alt=""/></a></div>

</body>

</html>

<script type="text/javascript">

    /*最低兼容到ie7*/

    window.onscroll = function(){

        var t = document.documentElement.scrollTop || document.body.scrollTop;

        var top_div = document.getElementById( "top_div" );

        if( t >= 300 ) {

            top_div.style.display = "none";

        }

        if( t <= 0 ) {

            top_div.style.display = "none";

        }

        else {

            top_div.style.display = "block";

        }

    }

</script>

效果图：

js+css实现点击回到顶部的效果（最低兼容至ie7）的更多相关文章

  1. 点击回到顶部（jQuery）

    写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件  和animate特效. html部分 <div class="pulltop"> <img sr ...

  2. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js点击回到顶部2

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点 ...

  5. js点击回到顶部

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. jquery点击回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  8. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  9. jq与js的写法，示例回到顶部div滚动显示隐藏

    jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...

随机推荐

  1. SpringBoot整合redis把用户登录信息存入redis

    首先引入redis的jai包 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...

  2. java 用RGB生成图片动态命名

    import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java. ...

  3. lua脚本入门

    在网上下载一些工程,里边常常存在.lua .sh .in .cmake .bat等文件 今天专门查了一下相关文件的作用 .sh 通常是linux.unix系统下的脚本文件(文本文件),用于调用默认的s ...

  4. SQL Server死锁问题：事务(进程 ID x)与另一个进程被死锁在 锁 | 通信缓冲区资源上并且已被选作死锁牺牲品。请重新运行该事务。

    ### The error occurred while setting parameters### SQL: update ERP_SCjh_zzc_pl set IF_TONGBU=1 where ...

  5. Vue在移动端App中使用的问题总结

    1.客户端中弹出键盘使得fixed布局错乱 Vue 在移动端中使用,当弹出键盘时,fixed 布局的元素可能会被键盘顶起. 例子图示及解决方法参考:https://blog.csdn.net/qq_3 ...

  6. Liunx的软链接和硬链接

    ln 命令  命令名称: ln. 英文原意: make links between file. 所在路径: /bin/ln. 执行权限:所有用户. 功能描述:在文件之间建立链接. ln 命令 ...

  7. JS中包含6种错误类型

    1.SyntaxError(语法错误) 解析代码时发生的语法错误 eg:var 1a; Uncaught SyntaxError: Unexpected number 2.ReferenceError ...

  8. 设计模式学习笔记——Visitor 访问者模式

    1.定义IVisitor接口,确定变化所涉及的方法 2.封装变化类.实现IVisitor接口 3.在实体类的变化方法中传入IVisitor接口,由接口确定使用哪一种变化来实现(封装变化) 4.在使用时 ...

  9. es分片shard的数量

    适当的提升分片数量可以提升建立索引的速度: 一般情况下:一个索引库建立5-20个分片是最合适的: 注意:如果分片过少或者过多,都会降低检索的速度 分片数过多会导致: 1. 会导致打开比较多的文件2. ...

  10. 大数据笔记（二）——Apache Hadoop的体系结构

    一.分布式存储 NameNode(名称节点) 1.维护HDFS文件系统,是HDFS的主节点. 2.接收客户端的请求:上传.下载文件.创建目录等. 3.记录客户端操作的日志(edits文件),保存了HD ...