<!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. js的字符串是数字时过长的时候会被截断

    JavaScript能表示并进行精确算术运算的整数范围为:正负2的53次方,也即从最小值-9007199254740992到最大值+9007199254740992之间的范围:对于超过这个范围的整数, ...

  2. springboot创建拦截器

    一.创建一个MyIntercepor实现HandlerInterceptor接口的类             二.创建一个WebMvcConfig实现WebMvcConfigurer的类       ...

  3. jdk7.x对Jenkins上的SonarQube Plugin的支持不足，替换方式

    Jenkins.war放在Tomcat7下,完成各种配置,包括Jenkins中JDK,Maven,Git等. 最初的配置为Tomcat7, JDK7.x. 因为要在Jenkins上安装SonarQub ...

  4. [CF Round603 Div2 F]Economic Difficulties

    题目:Economic Difficulties 传送门:https://codeforces.com/contest/1263/problem/F 题意:给了两棵tree:Ta(拥有a个节点,节点编 ...

  5. EasyUI combotree 设置节点折叠和叶子节点循环展开的BUG

    树实体 public class Combotree { public string id { get; set; } public string text { get; set; } public ...

  6. COUNT 和 IFNULL函数

    用COUNT函数: mysql> SELECT count(one) FROM tb_test;+------------+| count(http://www.amjmh.com/v/BIBR ...

  7. Mysql数据库密码忘记的解决办法

    密码忘记——破解密码 跳过授权方式,直接登录!! 1.以管理员身份打开cmd 2.停掉mysql服务端 C:\WINDOWS\system32>net stop mysql MySQL 服务正在 ...

  8. LeetCode 103——二叉树的锯齿形层次遍历

    1. 题目 2. 解答 定义两个栈 s_l_r.s_r_l 分别负责从左到右和从右到左遍历某一层的节点,用标志变量 flag 来控制具体情况,根节点所在层 flag=1 表示从左到右遍历,每隔一层改变 ...

  9. 架构-数据库访问-SQL语言进行连接数据库服务器-DAO：DAO

    ylbtech-架构-数据库访问-SQL语言进行连接数据库服务器-DAO:DAO DAO(Data Access Object) 数据访问对象是一个面向对象的数据库接口,它显露了 Microsoft ...

  10. ceph-pve英语

    adapted accordingly并相应地调整 silosn. 筒仓:粮仓:贮仓(silo的复数) saturatevt. 浸透,使湿透:使饱和,使充满While one HDD might no ...