锚链接跳至下一部分,然后又跳回到页面顶部?

时间:2019-02-05 21:43:31

标签: html css hyperlink

我在目标网页上有3个定位链接,但一次只能工作一个。如果单击三个链接之一,页面将滚动到正确的部分,并且一切正常。但是,如果我向上滚动到顶部并单击其他链接之一,则页面会跳到右侧部分一秒钟,然后又跳回到顶部。

我已经仔细检查过我的ID是否正确,并且我没有重复使用ID。我有一个bootstrap插件。

这是我的导航栏:

<ul class="nav mr-5">
    <li class="nav-item">
      <a class="nav-link nav-link-size" href="#thefeatures"><strong>Features</strong></a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav-link-size" href="#prices"><strong>Pricing</strong></a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav-link-size" href="<%=new_user_session_path%>"><strong>Log in</strong></a>
    </li>
  </ul>
</nav>
<div class="container">
  <div class="row">
    <div class="col-lg-7">
      <div class="landing-trap landing-margin">Know what laws are being passed.</div>
      <div class="landing-trap-2">Fast, simple tracking. Never miss a bill again.</div>
      <div class="h5 pt-5 white-text">Proposed Committee Substitute Tracking Coming Soon!</div>
      <a class="btn btn-white" href="#pcs">Learn More</a>
    </div>

标签就在这里...

<section class="bg-offwhite" id="thefeatures">
<div class="container">
  <div class="landing-marketing-heading"><strong>Keep up with the North Carolina General Assembly</strong></div>
  <div class="landing-marketing-subtext">If you can track your dog with your phone, you should be able to track state legislation.</div>

<section class="bg-offwhite" id="pcs">
<div class="container pt-5">
  <div class="card mx-auto" style="width: 70%;">
    <div class="card-body">

<section class="section pb-5 bg-offwhite" id="prices">
<div class="container">
  <h1 class="text-center mb-3 dark-grey-text"><strong class="font-weight-bold">Pricing</strong></h1>
  <p class="text-center grey-text w-responsive mx-auto mb-5">
  Modern, smart, and easy tracking for everyone. Free basic tracking for the public. Discounts for nonprofits.</p>
  <div class="row mx-auto">

我认为这应该可行,但是对于锚链接应如何运作,也许我不了解。

非常感谢我的链接为何导致页面跳下然后再次备份的任何帮助。

0 个答案:

没有答案