實(shí)現(xiàn)置頂功能jQuery

SoapEye 發(fā)布于2019-08-21 10:19 / 1537人閱讀

摘要：去頂部去頂部置頂置頂功能置頂功能

HTML：        
        
        
            去頂部
        
        

CSS：    
    .fl{
        display:block;
        float:left;
        width:50px;
        height:50px;
        text-align:center;
        background-color:#eaeaea;
        background-image:url(../images/toTop.png);
    }
    .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}

    #Fixed {
        position: fixed;
        _position: absolute;
        z-index: 100;
        bottom: 70px;
        left: 50%;
        margin-left: 530px;
        _bottom: auto;_top:
        expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
        width: 50px;
        text-indent: -40000px;
        background: #fff
    }

    /*置頂 end*/

Js：    
    /*置頂功能*/
    $(function(){
    $(window).bind("scroll", {
        fixedOffsetBottom: parseInt($("#Fixed").css("bottom"))
    },
    function(e) {
        var scrollTop = $(window).scrollTop();
        var referFooter =$("#footer");
        scrollTop > 100 ? $("#goTop").show() : $("#goTop").hide();
        if (!/msie 6/i.test(navigator.userAgent)) {
            if ($(window).height() - (referFooter.offset().top - $(window).scrollTop()) > e.data.fixedOffsetBottom) {
                $("#Fixed").css("bottom", $(window).height() - (referFooter.offset().top - $(window).scrollTop()))
            } else {
                $("#Fixed").css("bottom", e.data.fixedOffsetBottom)
            }
        }
    });

    $("#goTop").click(function() {
        $("body,html").stop().animate({
            "scrollTop": 0,
            "duration": 100,
            "easing": "ease-in"
        })
    });
    });
    /*置頂功能 end*/

云服務(wù)器 GPU云服務(wù)器 php實(shí)現(xiàn)置頂功能 jquery置頂置頂功能 jquery功能

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85298.html

相關(guān)文章

JavaScript實(shí)現(xiàn)置頂功能

摘要：實(shí)現(xiàn)置頂功能的方式有很多，之前也用過一些，感覺比較復(fù)雜吧，自己最近做的東西需要，因此也在網(wǎng)上找了些資料，最后找到一個(gè)方法可以獲取頁面元素到瀏覽器視窗頂部的距離。 JavaScript實(shí)現(xiàn)置頂功能的方式有很多，之前也用過一些，感覺比較復(fù)雜吧，自己最近做的東西需要，因此也在網(wǎng)上找了些資料，最后找到一個(gè)方法 getBoundingClientRect() 可以獲取頁面元素到瀏覽器視窗頂部的...

KaltZK 2019-08-20 18:13 評論0 收藏0
eyoucms v1.4.9授權(quán)破解版易優(yōu)cms企業(yè)建站系統(tǒng)去版權(quán)版 v1.4.9

摘要：授權(quán)破解版易優(yōu)企業(yè)建站系統(tǒng)易優(yōu)企業(yè)建站系統(tǒng)是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。去版權(quán)破解版強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。直接去易優(yōu)官網(wǎng)，購買商業(yè)授權(quán)即可去除版權(quán)。eyoucms v1.4.9授權(quán)破解版(易優(yōu)企業(yè)建站系統(tǒng))是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。eyoucms v1.4.9去版權(quán)破解版強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。易優(yōu)cms破解授權(quán)...

番茄西紅柿 2021-08-10 09:40 評論0 收藏2637
用sort實(shí)現(xiàn)orderby

摘要：工作到了這個(gè)年數(shù)感覺那些基本函數(shù)語法已經(jīng)跟人合一了根本不會為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了在做小程序的時(shí)候遇到了個(gè)的場景結(jié)果發(fā)現(xiàn)沒有以為的那么簡單也許是之前不求甚解的原因那么現(xiàn)在來解決的問題問題的產(chǎn)生與探討方向在小程序中有個(gè)將的某一條置頂?shù)男? 工作到了這個(gè)年數(shù), 感覺那些基本函數(shù)語法已經(jīng)跟人合一了, 根本不會為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了. 在做小程序的時(shí)候遇到了個(gè)orderby的場景,...

jiekechoo 2019-08-23 14:14 評論0 收藏0
html簡單響應(yīng)式滾動條置頂

摘要：那么盒子首先就需要設(shè)置一個(gè)的高和定位的值在中也要控制值，通過判斷滾動條移動到容器頂部時(shí)固定最終效果獲取屏幕滾動條簡單響應(yīng)式滾動條置頂一般的，讓頁面出現(xiàn)滾動條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動條和overflow-y垂直滾動條那么現(xiàn)在要實(shí)現(xiàn)這樣的一個(gè)效果：直接在body中給一個(gè)header，后面一個(gè)Gr...

ranwu 2019-08-01 17:41 評論0 收藏0
html簡單響應(yīng)式滾動條置頂

摘要：那么盒子首先就需要設(shè)置一個(gè)的高和定位的值在中也要控制值，通過判斷滾動條移動到容器頂部時(shí)固定最終效果獲取屏幕滾動條簡單響應(yīng)式滾動條置頂一般的，讓頁面出現(xiàn)滾動條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動條和overflow-y垂直滾動條那么現(xiàn)在要實(shí)現(xiàn)這樣的一個(gè)效果：直接在body中給一個(gè)header，后面一個(gè)Gr...

daryl 2019-08-21 16:43 評論0 收藏0