HTML5 進度條綜合示例
1.基本進度條
2.計量條
3.自定義樣式進度條
4.分段進度條
5.圓形進度條
6.動畫效果進度條
7.文件上傳進度模擬
8.測試列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 進度條綜合示例</title>
<style>
/* 全局樣式 */
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
/* 為懸浮導航留出空間 */
padding-top: 60px;
}
section {
margin-bottom: 40px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
h2 {
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
.control-panel {
margin: 15px 0;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
/* 基本進度條樣式 */
#basic-progress-bar {
width: 300px;
height: 20px;
}
/* 計量條樣式 */
#meter-bar {
width: 300px;
height: 25px;
}
/* 自定義樣式進度條 */
#custom-progress-container {
width: 300px;
height: 20px;
background-color: #f1f1f1;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
#custom-progress-bar {
height: 100%;
background-color: #4CAF50;
width: 0%;
transition: width 0.3s;
text-align: center;
line-height: 20px;
color: white;
}
/* 分段進度條 */
#segmented-progress-container {
width: 300px;
height: 20px;
display: flex;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.progress-segment {
height: 100%;
transition: flex-grow 0.5s;
}
#segment-1 {
background-color: #FF5252;
}
#segment-2 {
background-color: #FFD740;
}
#segment-3 {
background-color: #69F0AE;
}
/* 圓形進度條 */
#circular-progress-container {
position: relative;
width: 100px;
height: 100px;
margin: 10px 0;
}
.circle-bg {
fill: none;
stroke: #f1f1f1;
stroke-width: 8;
}
.circle-fill {
fill: none;
stroke: #4CAF50;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 283;
stroke-dashoffset: 283;
transform-origin: 50% 50%;
transform: rotate(-90deg);
transition: stroke-dashoffset 0.5s;
}
#circular-progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
}
/* 動畫進度條 */
#animated-progress-container {
width: 300px;
height: 20px;
background-color: #f1f1f1;
border-radius: 10px;
overflow: hidden;
position: relative;
margin: 10px 0;
}
#animated-progress-bar {
height: 100%;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
width: 0%;
position: relative;
animation: progressAnimation 2s infinite linear;
}
@keyframes progressAnimation {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
/* 文件上傳進度條 */
#upload-progress-bar {
width: 300px;
height: 20px;
margin: 10px 0;
}
/* 導航欄樣式 */
nav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
transition: all 0.3s;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav.collapsed {
width: 220px;
height: 54px;!important;
}
nav.vertical.collapsed {
width: 220px;
height: 54px;!important;
}
nav.vertical {
width: 220px;
height: 100vh;
top: 0;
}
nav.vertical.left {
left: 0;
right: auto;
}
nav.vertical.right {
right: 0;
left: auto;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s;
}
nav.collapsed a {
padding: 14px 0;
width: 50px;
text-indent: -9999px;
}
nav.vertical a {
float: none;
width: 100%;
padding: 14px 0;
}
nav.vertical .toggle-div {
width: 200px;
height: 50px;
}
#toggle-collapse {
position: absolute;
top: 8px;
right: 10px;
background-color: #555;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
#toggle-position {
position: absolute;
top: 8px;
right: 100px;
background-color: #555;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
/* 置頂按鈕樣式 */
#top-button {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
#top-button:hover {
background-color: #45a049;
}
/* 右下側(cè)懸浮顯示菜單 */
.right-menu-ul {
list-style-type: decimal;
/* display: none; */
position: fixed;
bottom: 50px;
right: 20px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 30px;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
.right-menu-ul a {
float: left;
display: block;
color: white;
text-align: center;
/*padding: 14px 16px;*/
text-decoration: none;
}
.right-menu-ul a:hover{
background-color: #ddd;
color: black;
}
.right-menu-ul li:hover{
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- 導航欄 -->
<nav id="nav">
<div class="toggle-div">
<button id="toggle-collapse">折疊</button>
<button id="toggle-position">切換位置</button>
</div>
<a href="#basic-progress-section">基本進度條</a>
<a href="#meter-section">計量條</a>
<a href="#custom-progress-section">自定義樣式進度條</a>
<a href="#segmented-progress-section">分段進度條</a>
<a href="#circular-progress-section">圓形進度條</a>
<a href="#animated-progress-section">動畫效果進度條</a>
<a href="#upload-progress-section">文件上傳進度模擬</a>
<a href="#test-section">測試列表</a>
</nav>
<h1>HTML5 進度條綜合示例</h1>
<!-- 基本進度條 -->
<section id="basic-progress-section">
<h2>1. 基本進度條 (progress元素)</h2>
<p>HTML5原生提供的progress元素，適用于表示任務(wù)完成進度。</p>
<div class="control-panel">
<label>總進度: <input type="number" id="basic-max" value="100" min="1"></label>
<label>當前進度: <input type="number" id="basic-value" value="0" min="0"></label>
<label>更新間隔(ms): <input type="number" id="basic-interval" value="500" min="100"></label>
<button id="basic-start">開始</button>
<button id="basic-reset">重置</button>
</div>
<!-- 不確定的進度 -->
<p>不確定的進度(不指定value):</p>
<progress id="basic-indeterminate-progress"></progress>
<!-- 確定的進度 -->
<p>確定的進度:</p>
<progress id="basic-progress-bar" value="0" max="100"></progress>
</section>
<!-- 計量條 -->
<section id="meter-section">
<h2>2. 計量條 (meter元素)</h2>
<p>HTML5的meter元素，適用于表示度量值，可以設(shè)置高/低/最佳閾值。</p>
<div class="control-panel">
<label>最小值: <input type="number" id="meter-min" value="0"></label>
<label>最大值: <input type="number" id="meter-max" value="100"></label>
<label>低閾值: <input type="number" id="meter-low" value="30"></label>
<label>高閾值: <input type="number" id="meter-high" value="80"></label>
<label>最佳值: <input type="number" id="meter-optimum" value="90"></label>
<label>當前值: <input type="number" id="meter-value" value="0"></label>
<label>更新間隔(ms): <input type="number" id="meter-interval" value="500" min="100"></label>
<button id="meter-start">開始</button>
<button id="meter-reset">重置</button>
</div>
<meter id="meter-bar" min="0" max="100" low="30" high="80" optimum="90" value="0"></meter>
</section>
<!-- 自定義樣式進度條 -->
<section id="custom-progress-section">
<h2>3. 自定義樣式進度條</h2>
<p>使用div和CSS自定義樣式的進度條，提供更大的靈活性。</p>
<div class="control-panel">
<label>總進度: <input type="number" id="custom-max" value="100" min="1"></label>
<label>當前進度: <input type="number" id="custom-value" value="0" min="0"></label>
<label>更新間隔(ms): <input type="number" id="custom-interval" value="500" min="100"></label>
<button id="custom-start">開始</button>
<button id="custom-reset">重置</button>
</div>
<div id="custom-progress-container">
<div id="custom-progress-bar">0%</div>
</div>
</section>
<!-- 分段進度條 -->
<section id="segmented-progress-section">
<h2>4. 分段進度條</h2>
<p>將進度分為多個部分，每部分可以有不同的樣式和意義。</p>
<div class="control-panel">
<label>段1比例: <input type="number" id="segment-1-value" value="30" min="0"></label>
<label>段2比例: <input type="number" id="segment-2-value" value="40" min="0"></label>
<label>段3比例: <input type="number" id="segment-3-value" value="30" min="0"></label>
<label>動畫時間(ms): <input type="number" id="segment-animation-time" value="1000" min="100"></label>
<button id="segment-update">更新</button>
<button id="segment-reset">重置</button>
</div>
<div id="segmented-progress-container">
<div id="segment-1" class="progress-segment" style="flex-grow: 0;"></div>
<div id="segment-2" class="progress-segment" style="flex-grow: 0;"></div>
<div id="segment-3" class="progress-segment" style="flex-grow: 0;"></div>
</div>
</section>
<!-- 圓形進度條 -->
<section id="circular-progress-section">
<h2>5. 圓形進度條</h2>
<p>使用SVG和CSS創(chuàng)建的圓形進度條，適合需要更視覺化展示的場景。</p>
<div class="control-panel">
<label>總進度: <input type="number" id="circular-max" value="100" min="1"></label>
<label>當前進度: <input type="number" id="circular-value" value="0" min="0"></label>
<label>更新間隔(ms): <input type="number" id="circular-interval" value="300" min="100"></label>
<button id="circular-start">開始</button>
<button id="circular-reset">重置</button>
</div>
<div id="circular-progress-container">
<svg viewBox="0 0 100 100">
<circle class="circle-bg" cx="50" cy="50" r="45"></circle>
<circle id="circular-progress-fill" class="circle-fill" cx="50" cy="50" r="45"></circle>
</svg>
<div id="circular-progress-text">0%</div>
</div>
</section>
<!-- 動畫進度條 -->
<section id="animated-progress-section">
<h2>6. 動畫效果進度條</h2>
<p>帶有動畫效果的進度條，增強用戶體驗。</p>
<div class="control-panel">
<label>總進度: <input type="number" id="animated-max" value="100" min="1"></label>
<label>當前進度: <input type="number" id="animated-value" value="0" min="0"></label>
<label>更新間隔(ms): <input type="number" id="animated-interval" value="300" min="100"></label>
<button id="animated-start">開始</button>
<button id="animated-reset">重置</button>
</div>
<div id="animated-progress-container">
<div id="animated-progress-bar"></div>
</div>
</section>
<!-- 文件上傳進度條 -->
<section id="upload-progress-section">
<h2>7. 文件上傳進度模擬</h2>
<p>模擬文件上傳過程的進度條。</p>
<div class="control-panel">
<label>上傳時間(ms): <input type="number" id="upload-duration" value="5000" min="1000"></label>
<button id="upload-simulate">模擬上傳</button>
<button id="upload-reset">重置</button>
</div>
<input type="file" id="file-input">
<progress id="upload-progress-bar" value="0" max="100"></progress>
<div id="upload-status">準備上傳...</div>
</section>
<!-- 測試列表 -->
<section id="test-section">
<h2>8. 測試列表</h2>
<p>帶有動畫效果，增強用戶體驗。</p>
<div class="control-panel">
<label>請輸入: <input type="text" id="test-1-value" value=""></label>
<button id="test-start">開始</button>
<button id="test-reset">重置</button>
</div>
<div id="temented-progress-container">
</div>
<script>
const test1Value = document.getElementById('test-1-value');
const startBtn = document.getElementById('test-start');
const resetBtn = document.getElementById('test-reset');
const testContainer = document.getElementById('temented-progress-container');
startBtn.addEventListener('click', function() {
testContainer.innerText = test1Value.value + " = " + eval(test1Value.value)
});
resetBtn.addEventListener('click', function() {
test1Value.value = "";
testContainer.innerText = "";
});
</script>
</section>
<!-- 置頂按鈕 -->
<button id="top-button">返回頂部</button>
<!-- 右下側(cè)懸浮顯示菜單 -->
<ul class="right-menu-ul">
<li><a href="#basic-progress-section">基本進度條</a></li>
<li><a href="#meter-section">計量條</a></li>
<li><a href="#custom-progress-section">自定義樣式進度條</a></li>
<li><a href="#segmented-progress-section">分段進度條</a></li>
<li><a href="#circular-progress-section">圓形進度條</a></li>
<li><a href="#animated-progress-section">動畫效果進度條</a></li>
<li><a href="#upload-progress-section">文件上傳進度模擬</a></li>
<li><a href="#test-section">測試列表</a></li>
</ul>
<script>
// 瀏覽器中的跨頁面通信(一)：Broadcast Channel
const bc = new BroadcastChannel('test_channel');
// 新消息綁定監(jiān)聽：
bc.onmessage = function(e) {
console.log(new Date + '\treceive:', e.data);
};
// 對于錯誤也可以綁定監(jiān)聽：
bc.onmessageerror = function(e) {
console.warn(new Date + '\terror:', e);
};
bc.postMessage('hello')
</script>
<script>
// 基本進度條控制
(function() {
const progressBar = document.getElementById('basic-progress-bar');
const startBtn = document.getElementById('basic-start');
const resetBtn = document.getElementById('basic-reset');
const maxInput = document.getElementById('basic-max');
const valueInput = document.getElementById('basic-value');
const intervalInput = document.getElementById('basic-interval');
let basicInterval;
startBtn.addEventListener('click', function() {
clearInterval(basicInterval);
const max = parseInt(maxInput.value);
const interval = parseInt(intervalInput.value);
let progress = parseInt(valueInput.value);
progressBar.max = max;
progressBar.value = progress;
basicInterval = setInterval(() => {
progress += 5;
if (progress > max) progress = max;
progressBar.value = progress;
valueInput.value = progress;
if (progress >= max) {
clearInterval(basicInterval);
}
}, interval);
});
resetBtn.addEventListener('click', function() {
clearInterval(basicInterval);
progressBar.value = 0;
valueInput.value = 0;
});
})();
// 計量條控制
(function() {
const meterBar = document.getElementById('meter-bar');
const startBtn = document.getElementById('meter-start');
const resetBtn = document.getElementById('meter-reset');
const minInput = document.getElementById('meter-min');
const maxInput = document.getElementById('meter-max');
const lowInput = document.getElementById('meter-low');
const highInput = document.getElementById('meter-high');
const optimumInput = document.getElementById('meter-optimum');
const valueInput = document.getElementById('meter-value');
const intervalInput = document.getElementById('meter-interval');
let meterInterval;
startBtn.addEventListener('click', function() {
clearInterval(meterInterval);
const min = parseInt(minInput.value);
const max = parseInt(maxInput.value);
const low = parseInt(lowInput.value);
const high = parseInt(highInput.value);
const optimum = parseInt(optimumInput.value);
const interval = parseInt(intervalInput.value);
let value = parseInt(valueInput.value);
meterBar.min = min;
meterBar.max = max;
meterBar.low = low;
meterBar.high = high;
meterBar.optimum = optimum;
meterBar.value = value;
meterInterval = setInterval(() => {
value += 5;
if (value > max) value = max;
meterBar.value = value;
valueInput.value = value;
if (value >= max) {
clearInterval(meterInterval);
}
}, interval);
});
resetBtn.addEventListener('click', function() {
clearInterval(meterInterval);
meterBar.value = 0;
valueInput.value = 0;
});
})();
// 自定義進度條控制
(function() {
const progressBar = document.getElementById('custom-progress-bar');
const startBtn = document.getElementById('custom-start');
const resetBtn = document.getElementById('custom-reset');
const maxInput = document.getElementById('custom-max');
const valueInput = document.getElementById('custom-value');
const intervalInput = document.getElementById('custom-interval');
let customInterval;
startBtn.addEventListener('click', function() {
clearInterval(customInterval);
const max = parseInt(maxInput.value);
const interval = parseInt(intervalInput.value);
let progress = parseInt(valueInput.value);
updateCustomProgress(progress, max);
customInterval = setInterval(() => {
progress += 5;
if (progress > max) progress = max;
updateCustomProgress(progress, max);
valueInput.value = progress;
if (progress >= max) {
clearInterval(customInterval);
}
}, interval);
});
resetBtn.addEventListener('click', function() {
clearInterval(customInterval);
updateCustomProgress(0, parseInt(maxInput.value));
valueInput.value = 0;
});
function updateCustomProgress(value, max) {
const percent = Math.round((value / max) * 100);
progressBar.style.width = percent + '%';
progressBar.textContent = percent + '%';
}
})();
// 分段進度條控制
(function() {
const segment1 = document.getElementById('segment-1');
const segment2 = document.getElementById('segment-2');
const segment3 = document.getElementById('segment-3');
const updateBtn = document.getElementById('segment-update');
const resetBtn = document.getElementById('segment-reset');
const value1Input = document.getElementById('segment-1-value');
const value2Input = document.getElementById('segment-2-value');
const value3Input = document.getElementById('segment-3-value');
const animationTimeInput = document.getElementById('segment-animation-time');
updateBtn.addEventListener('click', function() {
const value1 = parseInt(value1Input.value);
const value2 = parseInt(value2Input.value);
const value3 = parseInt(value3Input.value);
const total = value1 + value2 + value3;
if (total <= 0) return;
// 設(shè)置動畫時間
segment1.style.transitionDuration = animationTimeInput.value + 'ms';
segment2.style.transitionDuration = animationTimeInput.value + 'ms';
segment3.style.transitionDuration = animationTimeInput.value + 'ms';
// 更新比例
segment1.style.flexGrow = value1;
segment2.style.flexGrow = value2;
segment3.style.flexGrow = value3;
});
resetBtn.addEventListener('click', function() {
segment1.style.flexGrow = 0;
segment2.style.flexGrow = 0;
segment3.style.flexGrow = 0;
value1Input.value = 30;
value2Input.value = 40;
value3Input.value = 30;
});
})();
// 圓形進度條控制
(function() {
const circleFill = document.getElementById('circular-progress-fill');
const circleText = document.getElementById('circular-progress-text');
const startBtn = document.getElementById('circular-start');
const resetBtn = document.getElementById('circular-reset');
const maxInput = document.getElementById('circular-max');
const valueInput = document.getElementById('circular-value');
const intervalInput = document.getElementById('circular-interval');
let circularInterval;
startBtn.addEventListener('click', function() {
clearInterval(circularInterval);
const max = parseInt(maxInput.value);
const interval = parseInt(intervalInput.value);
let progress = parseInt(valueInput.value);
updateCircularProgress(progress, max);
circularInterval = setInterval(() => {
progress += 5;
if (progress > max) progress = max;
updateCircularProgress(progress, max);
valueInput.value = progress;
if (progress >= max) {
clearInterval(circularInterval);
}
}, interval);
});
resetBtn.addEventListener('click', function() {
clearInterval(circularInterval);
updateCircularProgress(0, parseInt(maxInput.value));
valueInput.value = 0;
});
function updateCircularProgress(value, max) {
const percent = Math.round((value / max) * 100);
const offset = 283 - (283 * percent / 100);
circleFill.style.strokeDashoffset = offset;
circleText.textContent = percent + '%';
}
})();
// 動畫進度條控制
(function() {
const progressBar = document.getElementById('animated-progress-bar');
const startBtn = document.getElementById('animated-start');
const resetBtn = document.getElementById('animated-reset');
const maxInput = document.getElementById('animated-max');
const valueInput = document.getElementById('animated-value');
const intervalInput = document.getElementById('animated-interval');
let animatedInterval;
startBtn.addEventListener('click', function() {
clearInterval(animatedInterval);
const max = parseInt(maxInput.value);
const interval = parseInt(intervalInput.value);
let progress = parseInt(valueInput.value);
updateAnimatedProgress(progress, max);
animatedInterval = setInterval(() => {
progress += 5;
if (progress > max) progress = max;
updateAnimatedProgress(progress, max);
valueInput.value = progress;
if (progress >= max) {
clearInterval(animatedInterval);
}
}, interval);
});
resetBtn.addEventListener('click', function() {
clearInterval(animatedInterval);
updateAnimatedProgress(0, parseInt(maxInput.value));
valueInput.value = 0;
});
function updateAnimatedProgress(value, max) {
const percent = Math.round((value / max) * 100);
progressBar.style.width = percent + '%';
}
})();
// 文件上傳進度模擬
(function() {
const fileInput = document.getElementById('file-input');
const progressBar = document.getElementById('upload-progress-bar');
const statusDiv = document.getElementById('upload-status');
const simulateBtn = document.getElementById('upload-simulate');
const resetBtn = document.getElementById('upload-reset');
const durationInput = document.getElementById('upload-duration');
let uploadInterval;
simulateBtn.addEventListener('click', function() {
clearInterval(uploadInterval);
const duration = parseInt(durationInput.value);
const steps = 20;
const interval = duration / steps;
let progress = 0;
statusDiv.textContent = '上傳中: 模擬文件.txt';
progressBar.value = 0;
uploadInterval = setInterval(() => {
progress += (100 / steps);
if (progress > 100) progress = 100;
progressBar.value = progress;
if (progress >= 100) {
clearInterval(uploadInterval);
statusDiv.textContent = '上傳完成: 模擬文件.txt';
}
}, interval);
});
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
clearInterval(uploadInterval);
const duration = parseInt(durationInput.value);
const steps = 20;
const interval = duration / steps;
let progress = 0;
statusDiv.textContent = `上傳中: ${file.name}`;
progressBar.value = 0;
uploadInterval = setInterval(() => {
progress += (100 / steps);
if (progress > 100) progress = 100;
progressBar.value = progress;
if (progress >= 100) {
clearInterval(uploadInterval);
statusDiv.textContent = `上傳完成: ${file.name}`;
}
}, interval);
});
resetBtn.addEventListener('click', function() {
clearInterval(uploadInterval);
fileInput.value = '';
progressBar.value = 0;
statusDiv.textContent = '準備上傳...';
});
})();
</script>
<script>
//右下側(cè)懸浮顯示菜單
const nav = document.getElementById('nav');
const toggleCollapse = document.getElementById('toggle-collapse');
const togglePosition = document.getElementById('toggle-position');
let isCollapsed = false;
let isVertical = false;
let isLeft = true;
toggleCollapse.addEventListener('click', function () {
if (isCollapsed) {
nav.classList.remove('collapsed');
toggleCollapse.textContent = '折疊';
} else {
nav.classList.add('collapsed');
toggleCollapse.textContent = '展開';
}
isCollapsed = !isCollapsed;
});
togglePosition.addEventListener('click', function () {
if (!isVertical) {
nav.classList.add('vertical');
nav.classList.add('left');
isVertical = true;
togglePosition.textContent = '切換到頂部';
} else {
if (isLeft) {
nav.classList.remove('vertical');
nav.classList.remove('left');
isVertical = false;
isLeft = true;
togglePosition.textContent = '切換到側(cè)邊';
}
/*if (isLeft) {
nav.classList.remove('left');
nav.classList.add('right');
isLeft = false;
} else {
nav.classList.remove('vertical');
nav.classList.remove('right');
isVertical = false;
isLeft = true;
togglePosition.textContent = '切換到側(cè)邊';
}*/
}
});
// 顯示或隱藏置頂按鈕
window.onscroll = function () {
var topButton = document.getElementById("top-button");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
};
// 點擊置頂按鈕滾動到頁面頂部
document.getElementById("top-button").addEventListener("click", function () {
document.body.scrollTop = 0; // 對于 Safari
document.documentElement.scrollTop = 0; // 對于 Chrome、Firefox、IE 和 Opera
});
</script>
</body>
</html>
