zoukankan      html  css  js  c++  java
  • 点击回到顶部

    html:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>点击回到顶部</title>
    <link href="css/demo1.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/demo1.js"></script>
    </head>
    <body>
    <div id="d1"></div>
    </body>
    </html>

    css:

    * {
    padding:0px;
    margin:0px;
    }

    body{/*窗体加个背景图片 设置窗体的高度(图片的高度)*/
    height:4773px;
    background-image:url(../img/bg.png);

    }

    /*按钮的宽度 高度 按钮图片 */
    #d1{
    96px;
    height:96px;
    background-image:url(../img/top.gif);
    position:fixed;/*固定定位*/
    right:0px;
    bottom:0px;
    display:none;/*隐藏*/
    }

    js:

    /// <reference path="jquery-1.10.2.min.js" />

    var timer;
    $(function () {
    var dHeight = $(window).height();//获取窗体的高度
    $(document).scroll(function () {//对网页执行的一个scroll事件
    var top = $(document).scrollTop();//拖动滚动条的时候 距离浏览器顶部的距离
    if (top > dHeight) {
    $("#d1").show();
    } else {
    $("#d1").hide();
    }
    });

    //点击箭头的时候 回到顶部
    $("#d1").click(function () {
    timer = setInterval(function () {
    var backtop = $(document).scrollTop();
    var step = backtop / 5;//每次移动多少
    $(document).scrollTop(backtop - step);
    if (backtop == 0) {
    clearInterval(timer);
    }
    }, 30);
    });

    });

  • 相关阅读:
    Python的函数式编程: map, reduce, sorted, filter, lambda
    idea cant resolve symbo 'Table'
    idea离线下载lombok,以及lobok版本不兼容
    idea 设置author 设置黑色主题
    sbmvnmysql配置
    vue.js 接收url参数
    简单商城的数据库建表sql
    vue项目从静态页面添加后台出现的一些问题
    HTML转义字符大全
    vue dialog样式
  • 原文地址:https://www.cnblogs.com/sunshinezjb/p/8550563.html
Copyright © 2011-2022 走看看