隨時
隨地
按一下
就回到頁首
請看右下方浮動區塊
隨地
按一下
就回到頁首
請看右下方浮動區塊
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>
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>
.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;">，則可以變成圖像。圖像寬度要記得設。
沒有留言:
張貼留言