Как настроить положение окна при ссылке на другую часть сайта? - PullRequest
Новая
       9

Как настроить положение окна при ссылке на другую часть сайта?

0 голосов
/ 28 августа 2018

Я новичок в HTML и CSS и пытаюсь реализовать панель навигации, которая отправляет пользователя в другую часть моего одностраничного веб-сайта всякий раз, когда они нажимают на ссылку. Я использую якоря и ссылки для достижения этой цели. Например, у меня будет: 

<a name="JR_Harrison_Target"></a>

и затем используйте 

[<a href="#JR_Harrison_Target">Introduction</a>][1]

чтобы перейти в это место на странице. Единственная проблема заключается в том, что когда я нажимаю на ссылку, она отправляет меня на страницу с большим запасом пикселей в верхнем браузере из предыдущего раздела моего сайта. Это происходит всякий раз, когда я нажимаю ссылку на любой раздел. Есть ли способ отрегулировать положение якоря, на который я прокручиваюсь, чтобы я мог точно настроить окно? Спасибо!

Пример проблемы:

enter image description here

1 Ответ

0 голосов
/ 28 августа 2018

Попробуйте поиграть с этим кодом:

HTML 

<div class="menu">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
</div>

<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>

CSS 

section {
  height: 400px;
  background: red;
  border: 2px solid black;
}

.menu {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  color: black;
  display: flex;
  align-items: center;
  opacity: .5;
}

.menu a {
  margin: 0 20px;
}

JSFiddle: http://jsfiddle.net/8m0w2aon/8/

Как видите, чтобы ссылки работали должным образом, вам нужно поместить опору id в раздел, к которому вы хотите перейти. Вы будете просто "телепортированы" в начало раздела.

Каждая секция должна иметь фиксированную высоту, и из нее не должен выходить ни один элемент (например, фоновое изображение, которое больше, чем сама секция).

...