<!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. 去掉html中的标签

    //去掉html中的图片 String regEx_image = "(<img.*src\\s*=\\s*(.*?)[^>]*?>)"; Pattern p_s ...

  2. 【leetcode】622. Design Circular Queue

    题目如下: Design your implementation of the circular queue. The circular queue is a linear data structur ...

  3. C文件 CMakeList.txt编译器配置错误的问题 error:invalid conversion from 'int' to 'LAYER_TYPE' [-fpermissive]....

    在编译C工程时,遇到了如下错误: 一般看到类型错误,主要考虑是不是编译器错了. 以下引用:https://www.cnblogs.com/liushui-sky/p/7729838.html 后缀为. ...

  4. Android App学习计划

    模块化 Json Gson Fastjson Jackson EventBus GreenDao Flutter ButterKnife Dagger okhttp Rxjava/Rxandroid ...

  5. 无线网络中的MIMO与OFDM技术原理分析

    无线网络中的MIMO与OFDM技术原理分析CNET中国·ZOL 07年08月14日 [原创] 作者: 中关村在线 张伟 从最早的红外线技术到目前被寄予重望的WIFI,无线技术的进步推动我们的网络一步步 ...

  6. nginx修改默认运行80端口的方法

    修改方法 很简单,修改nginx的配置文件, 对应的值,如图: 将其改为别的端口号,就可以了.

  7. 170831-关于JdbcTemplate声明式事务-操作步骤-例子

    创建一个动态web工程 加入jar包 3.创建一份jdbc.properties文件 4.在spring配置文件中配置数据源 5.测试数据源: 6.配置jdbcTemplate: 7.创建Dao类 & ...

  8. 【转】i18n实现前端国际化(实例)

    源地址:https://www.jianshu.com/p/ea93efef5155 i18n实现前端国际化(实例) 0.1442018.08.27 16:25:10字数 246阅读 10563 在今 ...

  9. Java实体类之间的映射（多对多关系）

    多对对的映射,可以用学生和课程进行演示.一个学生可以选择多个课程,一个课程又对应了多个学生 定义学生类 class Stu{ private String name; private String n ...

  10. Gradel 多渠道打包 代码混淆

    http://blog.csdn.net/ttccaaa/article/details/47687241 http://www.bubuko.com/infodetail-987756.html h ...