[Blogger] 回到頂端控制項

[回到頂端控制項] 在網頁設計中是很常見的功能，也很實用，主要是用來將視窗位置快速拉回至頁面頂端。這篇文章記錄如何在 Blogger 下實作這個功能，下方的程式碼用來產生一個控制項，會在視窗捲動到某個位置後才顯示，按下控制項會把視窗位置快速拉回至項端。

控制項會固定於螢幕右下角，效果如下：

Android Chrome、IE、Chrome、Firefox、Safari 下測試顯示正常。

流程：

[1] 於 </head> 前添加 CSS，設定樣式。

<style>

.back-to-top {
       background-color: #000000;
       color: #FFFFFF;
       opacity: 0;

       transition: opacity .5s ease-in-out;
       z-index: 5;
       position: fixed;

right: 10px;

bottom: 10px;

width: 70px;

height: 70px;

box-sizing: border-box;

border-radius: 50%;

}

a.back-to-top {

font-weight: 1000;

letter-spacing: 2px;

font-size: 16px;

//text-transform: uppercase; <- this will make all text become uppercase

text-align: center;

line-height: 1.6;

padding-left: 16px;

padding-top: 22px;

}

.back-to-top:hover, .back-to-top:focus, .back-to-top:visited {

color: #FFFFFF; /* color of text on hover over */

text-decoration: none; /* no underline */

}

.back-to-top.show {

// IE doesn't support 60%, it must be 0.6

opacity: 0.6;

}

</style>

設計上是以 opacity 值來控制此控制項是否可見：

.back-to-top	不可見	opacity 為 0
.back-to-top.show	可見	opacity 不為 0

注意：

<1> CSS 中註解後再用註解會有問題

//opacity: 60%; // Comment here will make this doesn't work!!!
事實上，CSS 標準的註解是 /* */，這邊的 // 用法雖然有用但也是不符合 spec.。

<2> 因為 IE 不支援使用 xx% 來指定 opacity，為了避免問題值要用數字（0~1 之間）。這可能和版本有關，下面是我使用的 IE 版本，此版本不支援 xx% 寫法：

[2] 於 </body> 前增加 JS 控制程式及該控制項：

//<![CDATA[

jQuery(document).ready(function() {

var amountScrolled = 250;

var duration = 500;

var $link = $('#back-to-top');

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > amountScrolled) {

$link.addClass ('show');

} else {

$link.removeClass ('show');

}

});

$link.click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

//]]>

</script>

控制項是以 <a> 來實作。捲動後若位置超過 amountScrolled 時將控制項加入 .show 類別即可顯示；若沒超過就移除 .show 類別來隱藏控制項。按下控制項將視窗位置快速拉回至文章開頭。

結語/心得：

[1] 控制項的文字置中問題：

使用 text-align: center; 文字不會自動置中，需調整 padding-xxx 來置中文字，這又需依控制項中的文字長度、字型 … 等來改變。用來調整的設定為：

padding-left: 16px;

padding-top: 22px;

目前是用固定值，但應該有更好的作法。留下記錄，也許以後能找到更多資訊實作自動置中。

[2] jQuery APIs here:

addClass	add specific class
removeClass	remove specific class
jQuery('html, body').animate({scrollTop: 0}, duration);	animation scrolling

參考：

Add a "Scroll Back to Top" button to Blogger
How To Create a Floating Back-to-Top Button
Vertical text alignment in buttons and inputs

選單

2020年11月9日星期一