html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV):
如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下:
<a class="banner" href="/schoolFair/registration#nav">
<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>
二:通过点击button按钮使用js实现滚定跳转到页面指定位置(DIV):
如果我们要点击实现跳转的地方是一个button按钮的话,由于button不能添加href,所以我们只好使用js跳转代码来实现,具体代码示例如下:
<script>
function onTopClick() {
window.location.hash = "#abc";
}
</script>
<input type="button" name="Submit" value="提交" onclick="javascript:onTopClick();" />
<div id="abc">跳转到的位置</div>
上面这段代码,点击提交按钮,将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是:页面各元素赋予唯一ID,点击提交按钮触发js点击事件,js通过ID滚动跳转定位到该元素,window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。
综:window.location.href表示重定向,后面跟着的是完整的url地址,与其相似的还有window.location.hash,
下面来比较window.location.href和window.locaiton.hash的区别。
(1)window.location.href
得到和使用的是完整的url,比如window.location.href="www.baidu.com”表示的是重新定向,页面跳转
到新的页面。也可以通过window.location.href得到a标签的完整的href,比如<a href="#book">如果使用href,那
么可以得到完整的链接(url)
(2)window.location.hash
得到的是锚链接。相比如href,通过window.location.hash并不会跳转到新的链接,只会在当前链接里面
改变锚链。并且如果有<a href="#book">通过window.location.hash得不到完整的链接(URL),仅仅得到#book.
html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码的更多相关文章
- jquery 跳转到当前页面指定位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js点击左右滚动+默认自动滚动类
js点击左右滚动+默认自动滚动类 点击下载
- JS点击按钮打开新的独立页面
工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...
- html锚点 点击跳转到页面指定位置
本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置&quo ...
- JS中5秒中跳转到其他页面
原文:JS中5秒中跳转到其他页面 <head> <meta http-equiv="Content-Type" content="text/html; ...
- ScrollTo:实现平滑滚动到页面指定位置
ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...
- JQUERY实现点击INPUT使光标移动到最后或指定位置
下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...
- JS点击按钮弹出窗口
由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...
随机推荐
- Altium CAED 国际认证操作题例题(含下载)
官网介绍页面 https://www.altium.com.cn/certification 共五套操作题 含资料 蓝奏云:https://www.lanzous.com/i2lj1ng 百度网盘:h ...
- 云服务器+tomcat+mysql+web项目搭建部署
云服务器+tomcat+mysql+web项目搭建部署 1.老样子,开头墨迹两句. 作为我的第二篇文章,有很多感慨,第一篇人气好低啊,有点小丧气,不过相信我还是经验少,分享的都是浅显的,所以大家可能不 ...
- 理解以太坊的Layer 2扩容解决方案:状态通道(State Channels)、Plasma 和 Truebit
-宾夕法尼亚州的尼科尔森大桥建设照片(图源).罗马人的工程原理扩展至新的应用 对于以太坊来说,2018年是专注底层架构之年.今年很多早期参与者会测试网络极限,并且重新关注以太坊的扩容技术. 以太坊仍然 ...
- (三)Hyperledger Fabric 1.1安装部署-chaincode测试
环境搭建完毕,需要的工具和镜像安装完毕,就可以进行chaincode测试了,接下来参考官方教程运行first-network. 进入first-netwok: cd first-network fir ...
- PAT甲题题解-1029. Median (25)-求两序列的中位数,题目更新了之后不水了
这个是原先AC的代码,但是目前最后一个样例会超内存,也就是开不了两个数组来保存两个序列了,意味着我们只能开一个数组来存,这就需要利用到两个数组都有序的性质了. #include <iostrea ...
- 1079. Total Sales of Supply Chain (25)-求数的层次和叶子节点
和下面是同类型的题目,只不过问的不一样罢了: 1090. Highest Price in Supply Chain (25)-dfs求层数 1106. Lowest Price in Supply ...
- Final互评------《飞词》---- 拉格朗日2018
一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; N(Need,需求):拉格朗日2018团队对需求分析的做法是通过问卷调查的形式,通过问卷调查分析出目前的大学生群体 ...
- mysql数据出现Unknown column 'user_uid' in 'field list' sql错误
来源:https://blog.csdn.net/gnail_oug/article/details/53606608 在操作mysql数据库时提示com.mysql.jdbc.exceptions. ...
- Linux内核分析——第一章 Linux内核简介
第一章 Linux内核简介 一.Unix的历史 1.Unix系统成为一个强大.健壮和稳定的操作系统的根本原因: (1)简洁 (2)在Unix中,很多东西都被当做文件对待.这种抽象使对数据和对设备的 ...
- JDBC学习笔记——PreparedStatement的使用
PreparedStatement public interface PreparedStatement extends Statement;可以看到PreparedStatement是Stateme ...