• html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码


    一:通过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.

  • 相关阅读:
    tensorboard页面显示No dashboards are active for current data set 问题win10系统
    tensorboard在cmd运行成功但在浏览器中不能正常显示的问题解决
    使用tensorflow设计的网络模型看不到数据流向怎么办
    pycharm中某些方法被标黄的原因及解决办法
    np.newaxis()用法
    决策树模型、本质、连续值完整篇
    决策树模型、本质、连续值
    vsftp 用无法登陆的用户名登陆(也叫虚拟用户)并进入到自己的文件夹test
    vsftp 使用匿名帐号登陆
    CentOS 5/6.X 使用 EPEL YUM源
  • 原文地址:https://www.cnblogs.com/sjhsszl/p/8805336.html
Copyright © 2020-2023  润新知