<!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. POJ-3436-ACM Computer Factory(最大流, 输出路径)

    链接: https://vjudge.net/problem/POJ-3436#author=0 题意: 为了追求ACM比赛的公平性,所有用作ACM比赛的电脑性能是一样的,而ACM董事会专门有一条生产 ...

  2. darknet-yolov3模型预测框size不正确的原因

    问题描述:预测框的中心位置正常,但是预测的框的width和height不正常. 解决方法:使得训练的配置cfg和测试中cfg的输入width, height, anchorbox保持一致! 问题是我在 ...

  3. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  4. Oracle update或alter表被锁住的问题

    \\ 查询被锁的对象.来源.sid和serial select object_name, machine, s.sid, s.serial# from v$locked_object l, dba_o ...

  5. maven入门问题解决

    记录入门使用maven的问题和解决方法: 一.用mvn clean compile编译报错/ 或者在IDE中编译时,Problem视图显示错误:无法从maven服务器或者私有服务器或者某个网站中中下载 ...

  6. Glide 图片框架

    学习参考:https://blog.csdn.net/guolin_blog/article/details/53759439 一 基础使用 Picasso比Glide更加简洁和轻量,Glide比Pi ...

  7. sorted排序为什么不是我想要的结果？

    数据源: a=['7465', '7514', '8053', '8267', '8507', '8782', '9091', '9292', '9917', '10000', '10009'] 我以 ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_05 IO字符流_7_字符输出流的续写和换行

    追加写就是后面参数设置为true 加入换行符

  9. python学习笔记（数据类型）

    python数据类型: int 类型 float 小数类型 string 字符串 布尔类型 a = True b = False 1.列表,也称数组或list或array.它的表达方式通过下标或索引或 ...

  10. HttpServletRequest中的request.setAttribute()和request.getSession().setAttribute()

    request.setAttribute("num",value):有效范围是一个请求范围,不发送请求的界面无法获取到value的值,jsp界面获取使用EL表达式${num}:re ...