一:通过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)的方法代码的更多相关文章

  1. jquery 跳转到当前页面指定位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  3. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  4. html锚点 点击跳转到页面指定位置

    本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置&quo ...

  5. JS中5秒中跳转到其他页面

    原文:JS中5秒中跳转到其他页面 <head> <meta http-equiv="Content-Type" content="text/html; ...

  6. ScrollTo:实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  7. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  8. JQUERY实现点击INPUT使光标移动到最后或指定位置

    下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...

  9. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

随机推荐

  1. 记录:tf.saved_model 模块的简单使用(TensorFlow 模型存储与恢复)

    虽然说 TensorFlow 2.0 即将问世,但是有一些模块的内容却是不大变化的.其中就有 tf.saved_model 模块,主要用于模型的存储和恢复.为了防止学习记录文件丢失或者蠢笨的脑子直接遗 ...

  2. 【转载】kafka 基础知识

    1.       kafka介绍 1.1.       主要功能 根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能: 1:It lets you publish and ...

  3. ats透明代理

    透明代理是拦截客户端和服务器之间的连接而不可见的代理能力(比如ats). 必须要有一个网关设备,所有网络流量都通过该设备从客户端传递到Internet(或外部云).网关负责有效的将ATS拼接到该流量的 ...

  4. openstack 主机无法ping通instance,无法ssh到instance

    https://docs.openstack.org/zh_CN/user-guide/cli-nova-configure-access-security-for-instances.html 好不 ...

  5. PAT甲题题解-1081. Rational Sum (20)-模拟分数计算

    模拟计算一些分数的和,结果以带分数的形式输出注意一些细节即可 #include <iostream> #include <cstdio> #include <algori ...

  6. ajax请求超时判断(转载)

    ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : ' ...

  7. 基于SSH框架的网上书店系统开发的质量属性

    基于SSH框架的网上书店系统开发的质量属性 对于我的基于SSH框架的网上书店系统的开发要实现的质量属性有可用性.可修改性.性能.安全性.易用性和可测试性. 1.对于可用性方面的战术: 可用性(Avai ...

  8. Github作为图床的一个小坑

    Github作为图床的一个小坑 前言 听了少铭同学建议把github作为图床,结果遇到了一个小坑,总是显示不出来图片. 问题描述与解决 形如下的链接是显示不出来的: https://github.co ...

  9. img 分区响应图

    ---恢复内容开始--- a标签的target为_blank属性,意为跳转到新的页面. shape要和coords配合使用,shape为rect时意义为矩形.shape 为不同属性时意为不同的形态触碰 ...

  10. Latex使用:在latex中添加算法模块

    在Miktex下有三个latex algorithm包,分别为:algorithm,algorithmic,algorithm2e三个,其中algorithm,algorithmic经常成套使用: l ...