淡入淡出浮動式的回到網頁頂部按鈕

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

capture-20161004-090900

 

這麼做,一來可以讓使用者回到頂部去瀏覽其他的分頁,當網頁較長時,要回到網頁的上半部也比較容易,不然常常滾輪會滾到瘋掉吧。
這個設計是只要滑到最底層或是中間就可以點右下角向上箭頭,就可以快速的往頂部去.
主要用到的 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=”http://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%;

文轉自AWEIDESIGN

Comments

comments