zoukankan      html  css  js  c++  java
  • JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能

    HTML代码:

    <p id="back-top" style="display:block;">
                <a href="#top">
                    <span>返回顶部</span>
                </a>
            </p>

    CSS代码:

    /* 返回顶部 开始 */
            #back-top {
                position: fixed; /*相对于浏览器窗口进行绝对定位*/
                bottom: 10px;
                right: 15px;
                z-index: 99;
            }
    
                #back-top span {
                    width: 50px;
                    height: 64px;
                    display: block; /*将元素显示为块级元素*/
                }
    
                #back-top a {
                    outline: none; /*突出元素*/
                }
            /* 返回顶部 结束 */

    JavaScript代码:

    $(function () {
                // 隐藏 #back-top
                $("#back-top").hide();
                // 滚动窗口时触发
                $(window).scroll(function () {
                    //滚动条的垂直偏移大于500时
                    if ($(this).scrollTop() > 500) {
                        //淡入显示
                        $('#back-top').fadeIn();
                    } else {
                        //淡入隐藏
                        $('#back-top').fadeOut();
                    }
                });
                // 单击按钮滚动到顶部
                $('#back-top a').click(function () {
                    //自定义动画
                    $('body,html').animate({
                        scrollTop: 0
                    }, 800);
                    return false;
                });
    })

     End!

  • 相关阅读:
    工作态度
    SQL7.0有如下问题:视图字段未及时刷新
    遇到不讲交期的客户
    关于CashFiesta.com
    设置主机多IP技术失败
    已好的客户要建立VSS了
    MSSQL说日志已满
    特殊的四舍五入
    如何保证对帐不遗漏?
    Linux常用命令之其它类型命令汇总
  • 原文地址:https://www.cnblogs.com/gygg/p/11265354.html
Copyright © 2011-2022 走看看