• 技术文章 >web前端 >js教程

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

    藏色散人藏色散人2018-08-15 14:23:46原创10445
    在网站建设过程中,有时候会需要做一个这样的功能,在当前页面内鼠标点击某个位置就会直接移动到当前页面的指定的另一个位置。其实这种功能对于资深程序员来说肯定不是什么难事,但是对于新手小白而言,却有一定的难度,主要是不知从何下手。那么本篇文章就给大家介绍关于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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:vue-cli项目中如何缩短首屏加载时间以提高效率 下一篇:Node.js的事件循环工作流程以及生命周期的详细讲解
    大前端线上培训班

    相关文章推荐

    • js跳转页面方法实现汇总_javascript技巧• javascript - 使用php获取一个通过JS跳转的最终网址• ZF中使用JS跳转到锚点的有关问题• js跳转方式及代码的汇总

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网