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