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

Posted on: 11/05/201409/17/2019 - awei

Post Tags: CSS.Jquery, 頂部按鈕

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

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

箭頭圖片下載

Related Post

[awei研究室]問答小遊戲_JAVA_Script語法

[awei研究室]問答小遊戲_JAVA_Script語法

Posted on: 01/10/201701/10/2017 - awei

[網路資源]簡潔俐落的CSS載入動畫

Posted on: 10/02/201510/02/2015 - awei

[awei研究室]LINE原創貼圖製作(阿財貼圖)

Posted on: 04/26/201806/20/2020 - awei

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

自動引用通知: 淡入淡出浮動式的回到網頁頂部按鈕 – 動漫研究Blog

發佈留言取消回覆