一.最简单的静态返回顶部
1.
用命名锚点击返回到顶部预设的id为top的元素
<a href="#top“>返回顶部</a>
2.
操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）
<a href="javascript:scroll(0,0)">返回顶部</a>
二.简单的静态返回顶部，用js模拟滚动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#btn {
position: fixed;
bottom: 0;
}
</style>
</head>
<body style="height: 10000px">
<a href="javascript:;" id="btn">回到顶部</a>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
// 获取视界高度；
var winH = document.documentElement.clientHeight;
// 定义计时器；
var timer = null;
// 定义是否抵达顶部布尔值判断；
var isTop = true;
// 设置滚动事件；
window.onscroll = function(){
var toTop = document.body.scrollTop || document.documentElement.scrollTop;
// 判断是否到了第二屏，若是，显示按钮；
if (toTop >= winH) {
btn.style.display = 'block';
}else{
btn.style.display = 'none';
};
// 判断是否抵达顶部，若否，停止计时器；
if (!isTop) {
clearInterval(timer);
};
// 重置布尔值判断；
isTop = false;
}
// 设置按钮单击事件；
btn.onclick = function(){
// 设置计时器，50毫秒间隔；
timer = setInterval(function(){
var toTop = document.body.scrollTop || document.documentElement.scrollTop;
// 设置速度，用等式而不用具体数值是为了产生缓动效果；
var speed = Math.ceil(toTop/5);
// 作差，产生缓动效果；
document.documentElement.scrollTop = document.body.scrollTop = toTop - speed;
// 重置布尔值判断；
isTop = true;
// 判断是否抵达顶部，若是，停止计时器；
if (toTop == 0) {
clearInterval(timer);
};
},50);
}
}
</script>
</body>
</html>
相关推荐
简单的静态旅游网站，是用DreamWeaver做的。
【非常简单的静态网站】是一个专为介绍“有趣的鸡蛋”这一主题设计的简易网站。静态网站是基于HTML、CSS和JavaScript等基本技术构建的，不涉及服务器端编程，内容在用户请求时直接从服务器发送到浏览器，无需动态...
4. **响应式设计**：现代网站往往需要适应不同设备的屏幕大小，因此，这个简单的静态页面可能采用了响应式设计，通过媒体查询（`@media`规则）确保在手机、平板和桌面电脑上的显示效果良好。 5. **SEO优化**：为了...
"简单的静态网页"这个标题表明我们将探讨这个主题，了解如何创建一个基本的静态网页。 首先，HTML是静态网页的核心。HTML文件包含了网页的结构和内容，如标题、段落、图片和链接等。例如，`<html>`标签定义整个文档...
【标题】"最简单的静态网页.rar"所包含的是一个初学者级别的静态网页项目，这个项目主要运用了HTML5、CSS和JavaScript技术。HTML5是超文本标记语言的最新版本，它增强了网页的交互性和多媒体支持；CSS（层叠样式表）...
标题 "一个很简单很简单的静态网页(附源代码）HTML+CSS.rar" 提示我们这是一个关于创建基础静态网页的教程，其中包含HTML和CSS的源代码。这个压缩包可能是一个教学资源，帮助初学者理解网页设计的基本概念。 描述中...
"简单的静态分页"项目，正如标题所言，是一个相对基础的实现，旨在提供一个易用且高效的分页解决方案。下面将详细阐述其关键知识点。 1. **分页原理**： 静态分页是通过在服务器端预先计算好每一页的数据，并将其...
对静态页面最简单的一个示例介绍。展示了怎样建一个最简单的静态页面。并配有详尽注释。
标题“jquery超过一屏显示右下角返回顶部”所描述的是一个常见的网页交互功能，它利用jQuery库实现当页面滚动超过一整屏时，在页面右下角显示一个返回顶部的按钮，点击该按钮则平滑地滚动回页面顶部。这个功能在很多...
本文将详细解析"简单的伪静态示例"这一主题，结合C#、ASP.NET、SQL以及DBA等相关知识，为你揭示其背后的原理和实践方法。 伪静态，顾名思义，是将原本动态生成的URL转换为静态页面形式的URL，但实际内容仍然是动态...
总之，制作一个简单的静态登录注册页面是前端开发入门的重要步骤，它能够帮助开发者熟练掌握HTML、CSS和JavaScript的基本语法和实际运用，提升对网页结构和交互逻辑的理解。虽然这个项目在实际应用中的价值可能有限...
在本项目中，我们关注的是一个名为"一个简单的静态网页作品"的压缩包，它包含了创建静态网页的基础过程，非常适合初学者学习。静态网页是指不包含服务器端脚本的网页，其内容在用户请求时直接从服务器发送到浏览器，...
本文将深入探讨IIS6的伪静态配置及其对静态文件处理的重要性。 伪静态技术是一种通过URL重写技术将动态网页的URL转换为静态或看似静态的URL形式，从而提高搜索引擎友好性和用户体验。对于IIS6来说，实现伪静态主要...
5. **缓存策略**：生成的静态页面会被缓存，当新的请求到来时，服务器首先检查是否有对应的静态页面，如果有，则直接返回，无需再次生成，提高了响应速度。 6. **动态与静态的切换**：在某些情况下，如内容频繁更新...
总之，“简单静态的网页”是一个基础的网页设计案例，它涉及到HTML、CSS和JavaScript的基本应用，以及可能的响应式设计和简单的交互功能。对于初学者而言，这是一个很好的起点，可以从中学习到网页制作的基本流程和...
综上所述，JSP简单静态网页涉及的技术点包括JSP的基本概念、语法结构、与静态网页的融合以及开发工具的使用，这些都是Web开发中重要的基础知识。通过学习这些内容，开发者可以更好地理解和实践动态网站的开发。
在本主题中，我们将深入探讨“静态网页-大学作业-简单的静态网页”这一概念，以及与之相关的知识点。静态网页是互联网上最早出现的网页类型，它们由HTML、CSS和可能的一些JavaScript等静态语言构建而成。这样的网页...
"简单的后台静态页面"是一个适用于快速启动后台界面设计的资源，尤其适合初学者或者需要快速搭建原型的开发者。这个资源提供了可以直接使用的HTML页面，经过适当的修改，就可以适应你的项目需求，极大地提高了开发...
【标题】"简单实用的企业官网静态页面"所涉及的知识点主要集中在HTML5页面设计和静态网站模板的应用上。HTML5是现代网页开发的标准，它带来了许多新的元素、属性和API，使得网页设计更加灵活和强大。 一、HTML5基础...
以下是一个简单的伪静态配置示例： ```xml 将动态URL转换为伪静态格式 <from>/article.jsp?id=([^&]+)&title=([^&]+) <to>/articles/${encoders.urlPathEncode($1)}/${encoders.urlPathEncode($2)}....