<!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. layui数据表格,当数据过长出现三个...的时候,点击会弹出一个框全部显示,如何去掉这个框

    最笨的方法就是通过css把那个框隐藏掉 .layui-table-tips-main{display:none} .layui-table-tips-c{display:none}

  2. JS高阶函数--------map、reduce、filter

    一.filter filter用于对数组进行过滤.它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 注意: filter() 不会对空数组进行检测. 注意: filter() ...

  3. linux运维、架构之路-linux基础知识

    1.PATH环境变量 LANG ——————>变量名字 $LANG ——————>查看变量内容 LANG= ——————>修改变量 系统环境变量填加内容前面使用export expo ...

  4. spring boot不要放在tomcat下启动，因为自身就带了集成tomcat

    spring boot不要放在tomcat下启动,因为自身就带了集成tomcat

  5. 【FJ省队训练&&NOIP夏令营】酱油&&滚粗记

    FJOI2016省队训练滚粗记 2016.07.03~2016.07.06(Day1~5) 在学校期末考.因为才省选二试too young too simple爆蛋了所以下半个学期只能滚回去读文化课, ...

  6. Nginx动静分离-tomcat

    一.动静分离 1.通过中间件将动态请求和静态请求分离. 2.为什么? 分离资源,减少不必要的请求消耗,减少请求延时. 3.场景 还可以利用php,fastcgi,python 等方式 处理动态请求 # ...

  7. 170815-关于Session知识点

    Cookie:实际上就是一个头.               服务器会创建Cookie,并且将Cookie以一个响应头的形式发送给浏览器               浏览器收到Cookie以后,会保存 ...

  8. UVALive 6858 Frame （模拟）

    Frame 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/D Description http://7xjob4.com1.z0 ...

  9. (转)sql server 事务与try catch

    本文转载自:http://www.cnblogs.com/sky_Great/archive/2013/01/09/2852417.html sql普通事务 begin transaction tr ...

  10. Django中间件添加白名单

     一定记得配置 补充一点中间件是工作流程 中间件的详细流程 补充一点需求:在不用中间件的情况和下用装饰器做登陆的阻挡 在django中有自带的 登陆闭包函数只需要引出来就可以直接用了下面是步骤 在se ...