zoukankan      html  css  js  c++  java
  • 返回顶部

    返回顶部也是一个常见的效果,主要是在浏览较长的网页是,方便用户快速的回到顶部。

    首先是一个有滚动效果的长网页

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                border: none;
            }
    
            body {
                background-color: #ccc;
            }
    
            p {
                margin-bottom: 20px;
                text-align: center;
            }
    
            #top {
                width: 43px;
                height: 43px;
                background: url("images/top.png") no-repeat;
                background-size: 100% 100%;
                position: fixed;
                right: 10px;
                bottom: 30px;
                display: none;
            }
        </style>
    </head>
    <body>
    <span id="top"></span>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    </body>
    </html>

    在上面的页面结构中,我们用span元素添加了一个返回顶部按钮,因为在默认的初始化效果中,浏览器是置顶的,所以该按钮是隐藏的。

    接下来分析要实现的返回顶部效果。

    要实现这个效果,需要分三步:

    • 返回顶部的按钮的显示与隐藏
    • 返回顶部的效果:卷起的高度为0,
    • 动画效果

    常见的网页会设置,当网页卷起一定的高度时,才出现返回顶部的按钮,这里只是为了展示效果,所有定义为只要出现了滚动,就显示返回顶部按钮。

     window.onscroll = function () {
                scroll_top = scroll().top;
                scroll_top > 0 ? show($('top')) : hide($('top'));
            };

    返回顶部的起始效果是卷起高度的值,结束效果是卷起高度为0,在这个变化过程中,添加动画

      var scroll_top = 0, begin = 0, end = 0, timer = null;
    begin = scroll_top;
    $("top").onclick = function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    begin = begin + (end - begin) / 20;
                    window.scrollTo(0, begin);
                    if(Math.round(begin) === end){
                        clearInterval(timer);
                    }
                }, 20);
            }

    完整详细代码下载:点这里

  • 相关阅读:
    杨中科 向HtmlAgilityPack道歉:解析HTML还是你好用
    感觉这个JQuery不错,查询方便
    数据库异步操作
    Command 设计模式
    osg 细节裁剪 SAMLL_FEATURE_CULLING
    errno错误代码
    清空std::stringstream
    eclipse android javabuilder +CDTbuilder
    mfc c++ system调用 控制台窗口
    Androidndkr8e wordlist 第二个参数不是数值参数
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9665492.html
Copyright © 2011-2022 走看看