• JQuery 回到顶部效果


    图片,CSS/HTML/JS代码都在,可以直接用了.

    CSS代码

        <style type="text/css">
            #gs_feedback_gotop
            {
                _display: none;
            }
            #gs_feedback_gotop .side_fixed
            {
                position: fixed;
                right: 20px;
                bottom: 40px;
                z-index: 250;
            }
            #gs_feedback_gotop .to_top
            {
                position: relative;
                display: block;
                 35px;
                height: 0;
                margin-left: -8px;
                margin-bottom: 2px;
                padding-top: 35px;
                background: url(/image/go-top.png) no-repeat;
                overflow: hidden;
                cursor: pointer;
                z-index: 2;
                visibility: hidden;
            }
            #gs_feedback_gotop .to_top:hover
            {
                background-position: -36px 0;
            }
            #gs_feedback_gotop .c_fq, #gs_feedback_gotop .c_qs, #gs_feedback_gotop .c_os
            {
                display: block;
                 35px;
                height: 0;
                margin-left: -8px;
                padding-top: 35px;
                overflow: hidden;
                cursor: pointer;
                z-index: 2;
                margin-bottom: 2px;
                position: relative;
                background: url(../img/global/go-top.png) no-repeat;
            }
            #gs_feedback_gotop .c_fq
            {
                background-position: 0 -38px;
            }
            #gs_feedback_gotop .c_fq:hover
            {
                background-position: -36px -38px;
            }
            #gs_feedback_gotop .c_qs
            {
                background-position: 0 -76px;
            }
            #gs_feedback_gotop .c_qs:hover
            {
                background-position: -36px -76px;
            }
    </style>
    

    HTML代码

        <div id="gs_feedback_gotop">
            <div class="side_fixed">
                <a class="to_top" title="回到顶端" href="#top" id="gotop2" style="visibility: visible;
                    display: block;"> </a>
            </div>
    </div>
    

    JavaScript代码

            $(document).ready(function () {
                $(window).scroll(function () {
    
                    if ($(document).scrollTop() >= 200) {
                        $('#gotop2').css('visibility', 'visible');
                    } else {
                        $('#gotop2').css('visibility', 'hidden');
                    }
                });
    

  • 相关阅读:
    C++虚函数表解析(转)
    学习网址
    css 段落文字换行问题
    移动端fixed兼容问题
    半数集1
    汇编寄存器
    设计模式概述
    Vector用法介绍
    汇编PC硬件基本特征
    android 反编译总结
  • 原文地址:https://www.cnblogs.com/zitjubiz/p/Jquery_back_to_top.html
Copyright © 2020-2023  润新知