簡單地做一下“回到頂部”按鈕，用jQuery實現其隱藏和顯示

1、首先，我們要準備HTML代碼：

<div id="return-top">
     <a href="#top">返回頂部</a>
</div>

這裡的<a>標簽裡面的href=“#top”就表示點擊它就可以回到頂部，就不寫回到頂部的代碼了

2、設置其CSS樣式：

#return-top{
     width: 50px;
     height: 50px;
     background-color: #8FBC8F;/*背景顏色*/
     color: white;/*字體顏色*/
     position: fixed;/*固定按鈕的位置，不隨頁面滾動*/
     bottom: 40px;/*距離瀏覽器視窗底部的距離*/
     right: 40px;/*距離瀏覽器視窗最右側的距離*/
     text-align: center;
　　　display:none;/*重點！我們打開頁面時不需要看到這個按鈕，設置為不顯示*/
}
#return-top a{
　　color:white;
　　text-decoration:none;/*不要下劃線*/
　　line-height:20px;/*行高*/
　　display:block;/*不使用這個屬性的話，文字對不齊。。。具體原因我沒瞭解過*/
　　margin:5px;/*元素四周的外邊距為5像素，加上行高*2（因為有兩行），剛好是50px(div的高)*/
}

一頓胡亂操作之後，“返回頂部”按鈕就有瞭如下這個外觀：，還怪好看的（不是

3、重點來了，jQuery代碼部分：

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
      $(window).scroll(function(){
           if($(this).scrollTop()>300){
                $("#return-top").show()
           }else{
                $("#return-top").hide()
           }
      })
</script>

解釋一下：首先我們要做的功能是：用戶打開網頁，看不到按鈕，滾動到了離頁面頂端較遠的地方，按鈕自己出來了，點擊按鈕回到頂部，按鈕又消失了

代碼思路：當瀏覽器的滾動條靠近頂端的時候，“回到頂部”按鈕始終隱藏（包括剛打開網頁的時候，設置display:none），使用hide()方法；

　　　　　當滾動條位置有了變化，觸發瀏覽器視窗的滾動事件（scroll()方法），當滾動條位置距離初始位置大於一定數值（像素值）時，按鈕顯示（show()方法）

提示：使用jQuery代碼，要先引入js文件哦哦！

我是個編程小白，如果路過的網友有看了我寫的內容很想打（指導）我的地方，可以告訴我啦啦啦^_^

題外話：想問下“^”這個符號你們怎麼念的啊。。。。