几种常用网页返回顶部代码

韦小宝

发布时间：2017-11-23 10:02:32

14380人浏览过

来源于php中文网

原创

在网站里很常见的点击回到头部，点击回到顶部，今天我们就来讲讲那些特别简单的点击就能回到头部的代码。

一、使用HTML的锚标记最简单了

但是唯一的缺点就是样式不怎么样，会显示这个锚标记。

放置位置在

标签之后随便找个地方放都可以，只要靠近顶部即可。

页面底部放置：

返回顶部

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：

方式1（推荐：简单方便）：

返回顶部

scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。

方式2（注重效果：缓慢向上）：

本方式是渐进式返回顶部，要好看一些，代码如下：

functionpageScroll(){window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}返回顶部

这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。

仿太平洋网页固定层返回顶部代码效果

下载

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

三、使用Onload加上scroll功能实现动态返回顶部

1、首先在网页body标签结束之前加上：

返回顶部

2、再调用以下JS脚本部分：

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

这些可以放到网页中中，也可以独立存成一个js文件，比如gotop.js，再通过以下形式：

来调用，当然了位置最好放在“返回顶部”标签的下面，该调用方法已假设文件路径为JS，放在其它位置请根据实际修改。

以上就是几种常用网页返回顶部代码，可以自己修改一下，然后再使用，更多到PHP中文网搜索哦~

相关推荐：

JavaScript简单返回顶部代码及注释说明

CSS-返回顶部代码_html/css_WEB-ITnose

用jQuery实现的智能隐藏、滑动效果的返回顶部代码_jquery

html5滤镜怎样调局部亮度_html5局部亮度滤镜法【步骤】

html个人页面头部怎么写_html头部meta与title设置【标签】

html5播放rtsp怎么分片_html5rtsp流分片处理法【技术】

如何在多次调用 JavaScript 函数时持久化保存选择值并累加总价

如何在多次调用函数时持久化保存并累加表单选择值

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：CSS里的min-height和max-height怎么使用下一篇：Table，tr，td，th这些表格标签元素怎么使用

作者最新文章

html drag拖拽事件

2018-05-18 15:39

JSON传值与PHP接收的几种情况

2018-05-28 13:53

使用正则表达式验证登录页面输入是否符合要求_正则表达式

2018-05-25 14:57

基于javascript 显式转换与隐式转换(详解)_javascript技巧

2018-05-17 15:36

ReactNative中使用Redux架构总结_javascript技巧

2018-05-26 10:23

dreamweaver怎么快速对齐代码? dw对齐代码的设置方法_Dreamweaver教程_网页制作

2018-05-19 14:59

PHP中$_FILES函数细说

2018-05-23 16:57

高效率php调试错误提示工具：最新版PHPstorm中的xdebug配置与使用详解(图)

2018-07-12 17:25

tp5.1框架的下载与安装方法步骤（图文）

2018-07-12 17:36

最全的Linux下的压缩和解压zip、gz、tar、bz2文件命令（图文步骤详解）

2018-07-13 10:50

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29