js怎么实现鼠标点击当前页面某一处后跳转到指定div部位
一、通过html锚点实现:
如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码示例:
<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>
注意:点击上面A链接将会滚动跳转到同一页面中id="abc"的那个div处,需要注意的是跳转指定位置div的id是唯一的,A标签直接指向此id,id前面别忘了加上#号。
二、通过点击button按钮实现:
如果我们要点击实现跳转的地方是一个button按钮的话,由于button不能添加href,所以我们只好使用js跳转代码来实现,代码示例<script>
function onTopClick() {
window.location.hash = "#abc";
}
</script>
<inputtype="button" name="Submit" value="提交"/>
<div id="abc">js跳转到页面指定div位置</div>
js跳转到页面指定div位置
注意:上述,点击提交按钮,将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是:页面各元素赋予唯一ID,点击提交按钮触发js点击事件,js通过ID滚动跳转定位到该元素,window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。
那么以上所述就是关于div实现局部跳转页面的两种简单方法,相信尽管是新手小白在看过此篇文章介绍后也会轻松的掌握相关知识。
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至201542412@QQ.com举报,一经查实,本站将立刻删除。
相关推荐
-
帝国cms是实现顶赞增加信息随机点赞数范围在1-100之间
实现发布文章的时候顶赞随机取一个数值,如果文章用到顶踩功能这样这样就不用填手动输入,或忘记的时候显示0,默认数值之间可以自己修改。方法;首先必须用到这个字段的,然后点击
-
帝国CMS商城系统如何实现在线支付后发送订单邮件提醒功能
帝国CMS是个强大的内容管理系统,其商城的功能也很强大,当用户下单,支付后我们怎么知道有用户下单了呢?因为我们不能时时刻刻都在网站后台,不断的刷新页面去看有无订单,最常用的做法是用邮件提醒我们,有人下单了.
-
手机端点击图标下拉导航菜单代码
html手机端下拉菜单代码,jQury手机移动端下拉列表选择代码**前面一定要加上jqury.min.js如图所示:html部分:css代码:js部分:图标...
-
帝国cms内容页面的tags调用方法
帝国cms内容页面调用本文章的gs方法如下[cod]标签:[:loop={"SLCT*FROMyisvip__cms_nws_da_1WHRid='".$navinfor."'",1,24,0}]...
-
一段js实现复制文本内容到剪切板
一段js实现复制文本内容到剪切板