<!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下拉框右边图标动画,不要动画

    /* 取消动画 / .layui-form-selected .layui-edge { margin-top: -3px; -webkit-transform: rotate(0deg); tran ...

  2. 2019年开发App记录

    Pod 制作私有库参考 https://www.jianshu.com/p/f903ecf8e882 Pod私有库的升级 改代码部分,到Example文件夹执行pod install ,修改XXX.s ...

  3. 【BZOJ5092】分割序列（高维前缀和）

    题意:对于一个长度为n的非负整数序列b_1,b_2,...,b_n, 定义这个序列的能量为:f(b)=max{i=0,1,...,n}((b_1 xor b_2 xor...xor b_i)+(b_{ ...

  4. Linux命令行下常用svn命令

    1.Linux命令行下将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/do ...

  5. twitter api的使用

    1.用手机号注册推特账号 https://twitter.com/ 2.进入网站 https://apps.twitter.com/ 创建第一个app,填入基本信息 name写完会检测是否已经存在像我 ...

  6. Hash算法原理以及HashCode深入理解

    Java中的Collection有两类,一类是List,一类是Set.List内的元素是有序的,元素可以重复.Set元素无序,但元素不可重复.要想保证元素不重复,两个元素是否重复应该依据什么来判断呢? ...

  7. redhat 6.8 配置 centos6 163 的 yum 源

    1. 检查是否安装yum包[root@node1 rpms]# rpm -qa|grep yum 2. 删除自带的yum包[root@node1 rpms]# rpm -qa|grep yum|xar ...

  8. P1058立体图

    一道大模拟 思路: 首先是打表找规律时间 仔细思考(暴力手算)后推出这么一个数组: //宽的增加量 ]={,,,};//1竖着摞,2横着摞,3前后摞 //长的增加量 ]={,,,};//1竖着摞,2横 ...

  9. ASP Loading

    ASP 页面加载等待效果.如 显示"请稍后页面正在加载...",加载完成后隐藏这个loading. <%Response.buffer=false%> <html ...

  10. day41—JavaScript运动的停止条件

    转行学开发,代码100天——2018-04-26 前面学过了JavaScript运动的两种常用情形:匀速运动与缓冲运动.在这两种运动的处理过程中最大的区别在于速度的处理和到达目标点的处理. 即本文需要 ...