在单击当前页面的特定部分后,js如何跳转到指定的div?

电脑杂谈  发布时间:2020-09-20 17:06:13  来源:网络整理

鼠标点击跳转页面_鼠标点击跳转到页面_ppt点击跳转页面

在网站建设过程中,有时有必要执行此功能。单击当前页面上的某个位置将直接移动到当前页面上的另一个指定位置。实际上,对于高级程序员来说,这种功能当然并不困难,但是对于新手小白来说,它具有一定的难度,主要是因为它不知道从哪里开始。因此,本文将介绍js跳转到页面以指定div位置的两种方法。

一、由html锚实现:

鼠标点击跳转页面_鼠标点击跳转到页面_ppt点击跳转页面

如果要单击以实现跳转的位置是html锚点,即单击A标签超链接以实现跳转,我们可以将A标签的href属性直接指向指定位置的div跳跃的位置。代码示例如下:

点击跳转
将要跳转到这里

鼠标点击跳转页面_鼠标点击跳转到页面_ppt点击跳转页面

注意:单击上方的A链接将滚动到同一页面中id为“ abc”的div。应当注意,在指定位置的div的ID是唯一的,并且A标签直接指向该ID。不要忘记在ID前面添加#。

二、通过单击按钮来实现:

ppt点击跳转页面_鼠标点击跳转到页面_鼠标点击跳转页面

如果我们要单击以实现跳转的位置是一个按钮按钮,由于该按钮无法添加href,因此我们必须使用js跳转代码来实现。代码示例如下:


    
    
js跳转到页面指定div位置

鼠标点击跳转页面_鼠标点击跳转到页面_ppt点击跳转页面

注意:如上所述,单击“提交”按钮将滚动到id =“ abc”的同一页面的div。这种js单击跳转页面代码的原理是:页面的每个元素都分配有唯一的ID,单击“提交”按钮以触发js单击事件,js滚动通过ID来定位该元素,window.location.hash = “ #abc”表示是使用id =“ abc”定位当前页面的div。

然后,以上是div实现部分页面跳转的两种简单方法。我相信,即使是初学者,小白也可以在阅读本文后轻松掌握相关知识。

上面是js如何认识到鼠标单击当前页面的特定部分然后跳到指定的div部分吗?有关更多详细信息,请注意php中文网站上的其他相关文章!

本文最初发布在php中文网站上。请注明转载来源。谢谢您的尊重!

主题建议:js跳转到页面的指定div


本文来自电脑杂谈,转载请注明本文网址:
https://www.pc-fly.com/a/bofangqi/article-320692-1.html

    相关阅读
      发表评论  请自觉遵守互联网相关的政策法规,严禁发布、暴力、反动的言论

      热点图片
      拼命载入中...