Javascript 从另一页导航到主页时,主页会稍微向下移动

Javascript 从另一页导航到主页时,主页会稍微向下移动,javascript,html,css,Javascript,Html,Css,当我第一次进入我的网站时,主页看起来很好,但是当从我网站的另一个页面按back(返回)到我的主页时,页面的顶部比预期的稍低,你必须向上滚动一点才能到达最顶部。 为什么会这样?这和我的风格有关吗 CSS: HTML 撤退 辣木健康疗养院 要真正回答这个问题,我们需要更多的输入。这个问题可能是由很多事情引起的,也可能是由javascript/jQuery引起的。但是,通过使用浏览器的元素检查器,您可能可以看到导致它的原因。假设你有chrome,请看:@Loosie94谢谢你的评论。我已经用一些ht

当我第一次进入我的网站时,主页看起来很好,但是当从我网站的另一个页面按back(返回)到我的主页时,页面的顶部比预期的稍低,你必须向上滚动一点才能到达最顶部。 为什么会这样?这和我的风格有关吗

CSS:

HTML


撤退
辣木健康疗养院

要真正回答这个问题,我们需要更多的输入。这个问题可能是由很多事情引起的,也可能是由javascript/jQuery引起的。但是,通过使用浏览器的元素检查器,您可能可以看到导致它的原因。假设你有chrome,请看:@Loosie94谢谢你的评论。我已经用一些html更新了我的问题。这似乎只发生在我按下后退按钮返回主页时。我使用开发人员工具检查了一些元素,但是我找不到导致问题的原因。我没有在主页上使用JavaScript或jQuery,只是在页脚上使用了一点,查看代码是否仍然有帮助?要真正回答这个问题,我们需要更多的输入。这个问题可能是由很多事情引起的,也可能是由javascript/jQuery引起的。但是,通过使用浏览器的元素检查器,您可能可以看到导致它的原因。假设你有chrome,请看:@Loosie94谢谢你的评论。我已经用一些html更新了我的问题。这似乎只发生在我按下后退按钮返回主页时。我使用开发人员工具检查了一些元素,但是我找不到导致问题的原因。我没有在主页上使用JavaScript或jQuery,只是在页脚上使用了一点,查看代码是否仍然有帮助?
.background-img {
  background: url(./images/rocks.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: white;
  width: 100%;
  height: 620px;
  margin-top: -24px;
  margin-left: -8px;
  padding-right: 16px;
}

 h1 {
   color: white;
   font-family: 'Great Vibes', cursive;
   margin-left: 30px;
   font-size: 45px;
  text-align: left;
   margin-top: -57px;
 }

/* Transparent Subnavigation Bar */

 .navbar {
 overflow: hidden;
 background: rgba(0, 0, 0, 0.2);
 font-family: 'Hind', sans-serif;
 margin-top: 24px;
 margin-right: -16px;
 height: 4.3rem;

 background-color: inherit;
 font-family: 'Hind', sans-serif;
 line-height: 44px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
 display: none;
 position: absolute;
 background: rgba(50, 53, 44, 0.3);
 /* background: rgb(82, 109, 139); */
 font-family: 'Hind', sans-serif;
 min-width: 160px;
 z-index: 1;
}
 #page-container {
   position: relative;
   min-height: 100vh;
 }

/* Footer */
 #footer {
   position: relative;
   bottom: 0;
   background-color: black;
   color: white;
   width: 100%;
   height: 5.5rem;        
   margin-left: -8px;
   padding-right: 16px;
   bottom: -8px;
  }

  .footer-text {
    padding-left: 20px;
    padding-top: 10px;
  }
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <script src="/scripts/retreat.js"></script>
    </head>
    <body>
            <div class="page-container">
            <div class="background-img">
        <div class="navbar">
            <button class="btn">
                    <a id="btn-text" href="./contact.html">Book Now</a></button>
        <a href="./contact.html">Contact</a>
            <div class="dropdown">
                    <button class="dropbtn">Retreat
                        <i class="fa fa-caret-down"></i>
                            </button>

                <div class="dropdown-content">
                <a href="Retreat-Dropdown/moringaMethod.html">The Moringa Method</a>
                    <a href="Retreat-Dropdown/location.html">Location</a>
                    <a href="Retreat-Dropdown/programme.html">Programme</a>
                    <a href="Retreat-Dropdown/accomodation-prices.html">Accomodation/Prices</a>
            </div>
    </div>
    <a href="testimonials.html">Testimonials</a>
    <a href="about.html">About</a>
    <a href="home.html">Home</a>
</div>
            <h1> Moringa Wellness Retreat</h1>
        </nav>
    </div>