Плавная прокрутка к верху страницы, когда вы используете margin-top

Question

Плавная прокрутка к верху страницы, когда вы используете margin-top

0

Мой контент начинается с того, что logobox является первым:

#logobox { width: 178px; height: 204px; margin-left: auto; margin-right: auto; margin-top: 250px; }

Я использую скрипт из: http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

Я создал кнопку "назад к началу", но она только прокручивается назад туда, где начинается logobox, а не вверху страницы. Попробовал создать еще одну ссылку перед logobox, но это не сработает.

Любые идеи, как это исправить?

благодаря

amars 18 янв. 2014, в 00:12

Источник

Теги:

javascript

jquery

html

css

2 ответа

0

Возможно, добавление идентификатора в тег тела и указание на него кнопки.

fabiofl 17 янв. 2014, в 21:35

Ещё вопросы

Will · Accepted Answer · 2014-01-17T21-10-00.000Z

Я предполагаю, что ваша кнопка [Back to top] похожа на <a href="#logobox">Top</a>?

Это всегда приведет вас к 250px ниже того, что помещается после #logobox, в этом случае верхняя часть окна (опять же, если предположить). В css маржа является смещением - элемент #logobox фактически смещается на 250 пикселей, поэтому, когда вы переходите к нему, 250px дальше вниз. Ты можешь:

Переключите элемент #logobox, чтобы использовать padding-top: 250px если это работает для вашего дизайна. вместо margin-top: 250px. Это фактически держит верхнюю часть коробки, где вы думаете, что это прямо сейчас (vs компенсирует ее с этой позиции).
Оставьте пустой элемент с идентификатором и наведите на него кнопку "вернуться к началу". Легко интернет самый популярный вариант, исторически. Обычно, досадно, в виде <a name="top"></a>
Если #logobox существует внутри элемента, такого как <header id="main-header"> и этот элемент не имеет верхнего поля, вы также можете указать свою кнопку [вверх] (в некоторых случаях, это. Верхняя граница поля на #logobox фактически повлияет на это в зависимости от заголовка css и других элементов в HTML).

Посмотрите эту скрипку. http://jsfiddle.net/willthemoor/Q7PCm/3/

Спасибо, Уилл. Изменение Margin на Padding решило это.
Рад, что это помогло. Вы бы отметили это как ответ, пожалуйста?