zoukankan      html  css  js  c++  java
  • 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');
                    }
                });
    

  • 相关阅读:
    logcat 自动清屏
    eclipse debug (调试) 学习心得
    黑马面试题
    如何分析解决Android ANR
    植物大战僵尸(一)
    cocos2d-小游戏
    VIM编辑器的使用
    面试题之排序总结
    面试题链表总结
    微软大楼设计方案(中等)(2017 计蒜之道 初赛 第六场)
  • 原文地址:https://www.cnblogs.com/zitjubiz/p/Jquery_back_to_top.html
Copyright © 2011-2022 走看看