Я использую статический бар в верхней части моего сайта, высотой 20 пикселей. Когда я нажимаю ссылку привязки (для тех, кто этого не знает, навигация по википедии работает так: щелкните заголовок, и браузер переходит к нему) часть текста исчезает за этой верхней панелью.
Есть ли способ остановить это? Я не в состоянии использовать iFrame. Единственное, что я могу придумать, это заставить его прокручивать назад каждый раз, но есть ли другой способ? Некоторые настройки CSS для управления телом или что-то еще?
Чтобы исправить это с помощью CSS, вы можете добавить дополнение к элементам, на которые вы хотите перейти:
Однако это не всегда применимо.
Для решения javascript вы можете попробовать следующее:
Прикрепите событие к элементам привязки и включите следующую строку:
window.scroll(0,document.querySelector(this.href).offsetTop - 20);
/* prevent default action*/
return false;
Вы можете просто использовать CSS без javascript.
Дайте вашему якорю класс:
<a class="anchor"></a>
Затем вы можете установить привязку на смещение выше или ниже, чем там, где оно действительно отображается на странице, сделав его блочным элементом и относительно позиционируя его. -250px расположит якорь 250px
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
К янв. см. смещение привязки html для настройки фиксированного заголовка
CSS-only: он немного грязный, но :target {padding-top: 20px;} будет работать, если вы ссылаетесь на элемент блока (предположил, что вы это делаете, так как ваш вопрос говорит div). Однако это может выглядеть не так хорошо, когда вы прокручиваете вручную после этого. Пример http://dabblet.com/gist/3121729
Тем не менее, я думаю, что использование немного JavaScript для исправления было бы лучше.
Попробуйте с window.scrollBy(xnum,ynum);
xnum: сколько пикселей прокручивается по оси x (по горизонтали) ynum: сколько пикселей прокручивается вдоль оси y (вертикально)
Например: http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby