Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /volume1/librarythings/www/sites/all/modules/counter/counter.lib.inc).

網頁back to top按鈕

Categories : 

常常在網站裡面可以看到

在旁邊的捲軸附近有一個回到網頁最上方的小按鈕

好像有些是要用java來寫

但是後來上網找了一下,發現似乎不用這麼複雜

只需要在網頁的原始碼裡面,放上下面這個語法,就可以達到這個效果了!

 

CSS


首先,要在CSS的語法,寫上我們back to top的樣式

.backtotop {
    display:scroll;
    position:fixed;
    bottom:5px;
    right:5px;
}

bottom、right,是指距離網頁的下方和右邊各5px

所以最後呈現出來的位置,就會是在你的瀏覽器的右下角的地方

網頁原始碼


接著,在網頁原始碼

<body></body>之間,放上下面的語法,建議放在整個的最後面

才不會讓網頁裡面的內容有跑版的疑慮

<a href="#" title="" onFocus="if(this.blur)this.blur()">
<img src="image/backtotop-medium.png" alt='' border='0' class="backtotop" onmouseover="this.src='image/backtotop.png'" onmouseout="this.src='image/backtotop-medium.png'" /></a>

這邊分別可以設定三種不同的圖案,

原始圖片:就是一開始滑鼠都還沒有碰到backtotop圖案時所顯示的

onmouseover:當滑鼠移動到backtotop圖案上方時,這裡會顯示一個比較放大的圖案

onmouseout:當滑鼠移出backtotop圖案後,又恢復原本的圖片

 

是不是很簡單呢,如果大家有這樣的需求的話,也可以試著實作看看喔!