开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >HTML跳转到页面某一位置

HTML跳转到页面某一位置

里克贝斯

发布于 2021-05-21 06:51:40

发布于 2021-05-21 06:51:40

2K00

代码可运行

举报

文章被收录于专栏：图灵技术域图灵技术域

运行总次数：0

代码可运行

设计网页时，有时需要跳转到页面某一位置，下面给出了两种跳转到页面某一位置的两种方法。

下面两种方式均无滑动效果

方法1：使用JavaScript控制

代码：

<body>
<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('BODY')[0].scrollTop=document.getElementsByTagName('BODY')[0].scrollHeight;">到页底</a>
<div style="height:3000px;"></div>
<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('BODY')[0].scrollTop=0;">回页顶</a>
</body>

方法2：使用html描点控制

注意此处使用的ID来查找

<body>
<a href="#here" >bottom</a>//跳到id为here的锚点
// 内容
<a id='here' ></a>//锚点ID
</body>

复制上述代码进入下面的链接测试效果：

HTML/JS代码运行器

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-01-19，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

HTML如何实现页面跳转(html跳转到指定页面)

java html https 网络安全

window.history.go(-1)；或者window.history.back(-1)；

全栈程序员站长

2022/07/26

18K0

【HTML代码】在HTML加入图片飘窗的代码[汇总]

function math var html document

DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法，dede网站二开，以下龙腾飞网络科技-小吴在建站实操中笔记记录，织梦dede建站教程保存使用非常方便：

攻城狮与产品喵

2025/03/13

440

【HTML代码】在HTML加入图片飘窗的代码[汇总]

html node.js json jquery

浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载

大忽悠爱学习

2021/11/15

12.7K0

thinkphp6学习（10）跳转到的GB页面的界面设计

javascript java html c++

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

哆哆Excel

2022/10/25

5140

thinkphp6学习（10）跳转到的GB页面的界面设计

以前只是知道有锚点这么个东西，一直没有用到，昨天做毕设用到了锚点，现在总结一下控制锚点的几种情况： 1. 在同一页面中 <a name="add"></a><!-- 定

高爽

2017/12/28

3.8K0

【javaScript案例】之二级菜单的制作

document for循环 hidden onclick overflow

这次实现的效果图如下：二级菜单.gif 这个二级菜单实现的效果是：当点击某一个框时，会将已经打开的框的内容收回，再展开现在点击的框的内容。要如何实现这个效果呢？我们可以step by step 首先我们要将整个框架显示出来，即所有框展开的样子，因为其显示/不显示是拿overflow:hidden做的。但是要注意不要所有的框都拿一种类型的盒子做，因为那样不方便写js代码，毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框，所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其

xinxin-l

2022/03/29

6330

【javaScript案例】之二级菜单的制作

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是，如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利用JavaScript来创建一个图片库将是最佳的选择；说下步骤: 第一步：把整个图片库的链接都加载到图片库的主页里；第二步：当用户点击对应的超链接时,拦截网页的默认行为,即(超链接点击跳转行为); 第三步：当用户点击对应的超链接后,把"占位符"图片替换成那

郑小超.

2018/01/24

3.7K0

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。

Winter_world

2020/09/25

2.2K0

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

html可伸缩侧边栏

css javascript http html

写右侧侧边栏的时候，使用margin-right,会发先页面右侧溢出这是只要再body里加入 overflow-x:hidden;即可

治电小白菜

2020/08/25

5.8K0

JavaScript 学习总结

java html 存储 ajax xml

Java和Javascript的区别就像印度和印度尼西亚的区别，名字中有点相同的东西。

三杯水Plus

2018/11/14

1.4K0

【叔小生】JavaScript进阶篇

php 编程算法 node.js

如何插入JS JS基础语法语法、函数、方法提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。

达达前端

2019/08/01

1.2K0

【叔小生】JavaScript进阶篇

返回顶部的几种方法总结

java javascript https jquery 网络安全

<a href=”javascript:scroll(0,0)”>返回顶部</a>

全栈程序员站长

2022/09/07

1.1K0

html & CSS & JavaScript的学习

javascript css html ecmascript 编程算法

一、HTML 1. 概念：是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本： * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 * 标记语言： * 由标签构成的语言。<标签名称> 如 html，xml * 标记语言不是编程语言 2. 快速入门： * 语法： 1. html文档后缀名为.html或者 .htm 2. 标签分为：

Rochester

2020/09/01

6K0

移动端Webapp中的那些Bug

持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0（IOS 10.3.3） Github: webapp-bugs 1. IOS overflow: scrol

糊糊糊糊糊了

2018/05/09

3K0

移动端Webapp中的那些Bug

JS常用代码块

jsp html javascript java 缓存

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

奋飛

2019/08/15

3.3K0

直播卖货系统源码中，如何展示html格式的商品详情

移动直播互动直播

在开发iOS版的直播卖货系统源码过程中，如何在html上展示商品详情，下面小编将从WKWebView入手，来介绍下实现过程。

万岳教育系统

2020/07/16

1.1K0

直播卖货系统源码中，如何展示html格式的商品详情

基于JS实现回到页面顶部的五种写法(从实现到增强)

　　使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置

botkenni

2019/09/03

6.1K0

day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03_js学习笔记_03_js的事件、js的BOM、js的DOM ============================================================================= ============================================================================= 涉及到的知识点有：五、js的事件 1、js的常用事件 onclick

黑泽君

2018/10/11

28.1K0

大一学生《基于HTML+CSS制作体育篮球网页》期末网页制作

javascript html css jquery java

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！一、👨‍🎓网站题目 🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球、🎾网球、等网站的设计与制作。 <hr> 二、✍️网站描述 🏷️ 大学生校园运动静态HTML网页设计作品，采用DI

IT司马青衫

2022/08/13

2.2K0

大一学生《基于HTML+CSS制作体育篮球网页》期末网页制作

html网页详细代码「建议收藏」

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136151.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/05

7.8K0

相关推荐

HTML如何实现页面跳转(html跳转到指定页面)

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

JavaScript入门——简单代码实例

加入讨论

的问答专区 >

相关课程

一站式学习中心 >

云开发微搭低代码平台-一人构建企业级应用实战训练营

腾讯云微搭低代码

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验