常用小Demo：用js/jQuery實現回到頁面頂部功能

標籤：scrolltop   animate   

HTML代碼：

<div class="main">    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates!</div>//負責容納各種按鈕，例如“回到頁面頂部”，“掃面二維碼”等等<div class="backContainer">    <a href="#" id="backTop"></a></div>

CSS代碼：

*{margin:0; padding:0;}a{color:#000; text-decoration:none;}.main{width:100%; height:1500px;}.backContainer{position:fixed; right:40px; bottom:40px;}#backTop{display:block; width:46px; height:46px; background:url(‘images/go-top.png‘) no-repeat 0 -100px;}#backTop:hover{background-position-y:-150px;}

“回到頂部”按鈕及滑鼠移入時效果：

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/8A/2B/wKiom1gpd6fyuIxpAAAD0PxqpD8101.png" title="QQ20161114163610.png" alt="wKiom1gpd6fyuIxpAAAD0PxqpD8101.png" />  650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/8A/2B/wKiom1gpd7iwYTTzAAADFyagCnU525.png" title="QQ20161114163621.png" alt="wKiom1gpd7iwYTTzAAADFyagCnU525.png" />

JS代碼：

$(‘.backContainer‘).hide();$(window).scroll(function(){    //當視窗相對於捲軸頂部的位移大於150px時，顯示跳轉按鈕，否則不顯示    if($(window).scrollTop() > 150){        $(‘.backContainer‘).fadeIn(‘slow‘);    }else{        $(‘.backContainer‘).fadeOut(‘slow‘);    }});//當點擊跳轉按鈕時$(‘#backTop‘).click(function(){    $(‘html‘).animate({        scrollTop:0    },1000);})

scroll([[data],fn]): 

當使用者滾動指定的元素時，會發生 scroll 事件。  

scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器視窗）。

$(window).scroll( function() { /* ...do something... */ } );

animate(params,[speed],[easing],[fn])

用於建立自訂動畫的函數。  這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 

// 在一個動畫中同時應用三種類型的效果

$("#go").click(function(){   

    $("#block").animate({      

        width: "90%",     

        height: "100%",      

        fontSize: "10em",      

        borderWidth: 10   

            }, 1000 );

 });

scrollTop([val])

擷取匹配元素相對捲軸頂部的位移, 此方法對可見和隱藏元素均有效。

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1872718

常用小Demo：用js/jQuery實現回到頁面頂部功能