js怎么实现鼠标点击当前页面某一处后跳转到指定div部位？

在网站建设过程中，有时候会需要做一个这样的功能，在当前页面内鼠标点击某个位置就会直接移动到当前页面的指定的另一个位置。其实这种功能对于资深程序员来说肯定不是什么难事，但是对于新手小白而言，却有一定的难度，主要是不知从何下手。那么本篇文章就给大家介绍关于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>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">js跳转到页面指定div位置</div>

注意：上述，点击提交按钮，将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是：页面各元素赋予唯一ID，点击提交按钮触发js点击事件，js通过ID滚动跳转定位到该元素，window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。

那么以上所述就是关于div实现局部跳转页面的两种简单方法，相信尽管是新手小白在看过此篇文章介绍后也会轻松的掌握相关知识。

以上就是js怎么实现鼠标点击当前页面某一处后跳转到指定div部位？的详细内容，更多请关注php中文网其它相关文章！