[awei研究室]淡入淡出浮動式的回到網頁頂部按鈕

/ 分類: , / 0 則回應

標籤: ,

如果網頁很長,又想要快速的回到頂部.為了不要造成瀏覽者的不便
通常會設計一個會到頂部的按鈕

toptitle_01

這麼做，一來可以讓使用者回到頂部去瀏覽其他的分頁，當網頁較長時，要回到網頁的上半部也比較容易，不然常常滾輪會滾到瘋掉吧。
這個設計是只要滑到最底層或是中間就可以點右下角向上箭頭,就可以快速的往頂部去.
主要用到的 HTML+CSS+jQuery

1.首先HTML部分請加在<body>內(wordpress則加在index.php與single.php

)

<div id="gotop">˄</div>

2.CSS部分請加在您的css檔裡(wordpress則加在style.css)

#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;    
    padding: 10px 15px;    
    font-size: 20px;
    background: #777;
    color: white;
    cursor: pointer;
}

3.jQuery部分請加在您的css檔裡(wordpress則加在index.php與single.php)

<!-- Start 往頂部箭頭 Jquery碼//-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#gotop").click(function(){
jQuery("html,body").animate({
scrollTop:0
},1000);
});
$(window).scroll(function() {
if ( $(this).scrollTop() > 300){
$('#gotop').fadeIn("fast");
} else {
$('#gotop').stop().fadeOut("fast");
}
});
});
</script>

CSS微調

如果你想要調整箭頭改成圖片.可以到CSS裡

background: #777;

改成

background-image:url(你的圖片.jpg);
background-repeat: no-repeat;

其他如果想要調成圓角背景則是參考一般CSS按鈕設定即可

border-radius: 50%;

 

箭頭圖片下載

20140518223622531

作者：awei
一個從純樸鄉下 輾轉搬到現在繁華的都市 住在四周都是百貨公司與商店林立的便利世界裡 我只是想拍拍照 記錄一下這個我居住的星球 力量雖然渺小 但是我有我想做的一些事 貓咪慵懶的動作 花草的靜態之美 建築的偉大背景 等等.... If I like a moment, for me, personally, I don't like to have the distraction of the camera. I just want to stay in it.
個人網站 | 更多文章 »

一般留言 (0)

發表留言