html返回頂部的代碼，網頁返回頂部功能實現

2023-11-11 阅读 28 评论 0

摘要：一、效果圖：二、準備工作： jquery-3.6.0.min.js下載（鏈接如下） Download jQuery | jQuery html返回頂部的代碼，如圖，右鍵選擇Download the compressed....，點擊將鏈接另存為： ?保存在你想要的路徑下：三、代碼

一、效果圖：

二、準備工作：

jquery-3.6.0.min.js下載（鏈接如下）

Download jQuery | jQuery

html返回頂部的代碼，如圖，右鍵選擇Download the compressed....，點擊將鏈接另存為：

?保存在你想要的路徑下：

三、代碼：?

網頁點空白處回到頂部。強調一點：

（這種寫法是為了幫助純小白同學，有一定基礎的朋友可直接換為相對路徑）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>測試</title><!-- src處填寫你剛下載好了的jquery-3.6.0.min.js文件路徑 --><script type="text/javascript" src="file:\\\你的jquery-3.6.0.min.js存放地址\jquery-3.6.0.min.js"></script><style>#box {position: fixed;bottom:30px;right: 30px;}#back_to_top{border:1px solid #888;}.text{height: 3000px;width: 200px;}</style>
</head>
<body>
<!-- 此處可將button換做好看的圖標，但id需保持一致 -->
<div id="box" title="我是按鈕"><button id="back_to_top">返回頂部</button></div><!-- 此處用于填充頁面，以展示效果 -->
<div class="text"></div><script type="text/javascript">var backButton=$('#back_to_top');function backToTop() {$('html,body').animate({scrollTop: 0}, 500);  //這里的500用于調整滾動條回滾速度 ，例如還可改為：1000,700等}backButton.on('click', backToTop);$(window).on('scroll', function () {if ($(window).scrollTop() > ($(window).height()))backButton.fadeIn();elsebackButton.fadeOut();});$(window).trigger('scroll');
</script>
</body>
</html>

靜態網頁如何實現登錄？好了，大功告成！最后可將相應代碼移植到項目中為網頁添加上這個功能。

原文链接：https://808629.com/172210.html

上一篇：html返回頂部的代碼，用JS返回頂部

下一篇：vue實現文本點擊顯示，vue3點擊返回頂部