*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年11月13日 星期三

浮動的導覽列: 〈回到頁首〉

 回到頁首 
隨時
隨地
按一下
就回到頁首
請看右下方浮動區塊








1.請在<head>xxx</head>之間或<body>之後置入下列 jQuery 程式碼(課堂建議<head>xxx</head>之間):
 <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
說明:
1.如有其他互動機制使用到這條程式,就可以不要再用了。也就是說,這條程式出現一次即可。
2.如果是用KompoZer來編輯,請放到<body>之後,以減少出錯機會。



2.請於<head>xxx</head>之間或<body>之後置入下列二區塊程式碼(課堂建議<head>xxx</head>之間):
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
 
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>


<style>
.back-to-top {
    position: fixed;
    bottom: 5em;
    right: 15px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 1.39em;
    font-family: 微軟正黑體;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 0.5em;
    display: none;
}

.back-to-top:hover {   
    background-color: rgba(135, 135, 135, 0.50);
}
</style>

說明:
你也可以決定,往上滑之後,是不是一定要到頂。如果你把(紅字)0,改成400,那就會在從最頂部算下來400px處,停住。不會到頂。



3.請於<body>之後置入下列html文字碼:
<a href="#" class="back-to-top"> 回到頁首 </a>

說明:
一、「回到首頁」,你可以改成任何你想要的文字。
二、「回到首頁」,如果寫成<img src="xxx" style="width: 160px;">,則可以變成圖像。圖像寬度要記得設。







沒有留言:

張貼留言