Позиционирование
Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения position и как их использовать.
| Необходимые знания: | Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.) |
|---|---|
| Задача: | Изучить как работает CSS позиционирование. |
Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.
Введение в позиционирование
Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент — позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.
Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство position .
Статическое позиционирование
Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит «поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения».
Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму в HTML:
p class="positioned">. p>
А теперь добавьте следующее правило в конец вашего CSS:
.positioned position: static; background: yellow; >
И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!
Примечание: вы можете посмотреть живой пример на данном этапе на 1_static-positioning.html (см. исходный код).
Относительное позиционирование
Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление position в вашем коде:
position: relative;
Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top , bottom , left (en-US), и right которые мы объясним в следующем разделе.
Введение в top, bottom, left, и right
top , bottom , left (en-US), и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:
top: 30px; left: 30px;
Примечание: значения этих свойств могут принимать любые единицы которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.
Если вы сейчас сохраните и обновите, вы получите примерно такой результат:
h1>Relative positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p>
body width: 500px; margin: 0 auto; > p background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span background: red; border: 1px solid black; > .positioned position: relative; background: yellow; top: 30px; left: 30px; >
Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px; , сила толкает блок, заставляя его перемещаться вниз на 30px.
Примечание: вы можете посмотреть пример на этом этапе на 2_relative-positioning.html (см. исходный код).
Абсолютное позиционирование
Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:
position: absolute;
Если вы сохраните и обновите, то вы должны увидеть нечто подобное:
h1>Absolute positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p>
body width: 500px; margin: 0 auto; > p background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span background: red; border: 1px solid black; > .positioned position: absolute; background: yellow; top: 30px; left: 30px; >
В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее.
Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top , bottom , left (en-US), и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).
Примечание: вы можете использовать top , bottom , left (en-US), и right для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните.
Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.
Примечание: вы можете посмотреть пример на этом этапе на 3_absolute-positioning.html (см. исходный код).
Контекст позиционирования
Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).
Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент . Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента и будет расположен относительно исходного окна просмотра.
position: relative;
Это должно дать следующий результат:
h1>Positioning contexth1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> Now I'm absolutely positioned relative to the code><body>code> element, not the code><html>code> element! p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p>
body width: 500px; margin: 0 auto; position: relative; > p background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span background: red; border: 1px solid black; > .positioned position: absolute; background: yellow; top: 30px; left: 30px; >
Позиционируемый элемент теперь располагается относительно элемента .
Примечание: вы можете посмотреть живой пример на этом этапе на 4_positioning-context.html (см. исходный код).
Введение в z-index
Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы «побеждают» не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?
Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:
p:nth-of-type(1) position: absolute; background: lime; top: 10px; right: 30px; >
На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом .positioned , где они оба перекрываются. Это потому что параграф .positioned является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.
Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index . «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).
У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto , что фактически равно 0.
Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:
z-index: 1;
Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:
h1>z-indexh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> Now I'm absolutely positioned relative to the code><body>code> element, not the code><html>code> element! p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p>
body width: 500px; margin: 0 auto; position: relative; > p background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span background: red; border: 1px solid black; > .positioned position: absolute; background: yellow; top: 30px; left: 30px; > p:nth-of-type(1) position: absolute; background: lime; top: 10px; right: 30px; z-index: 1; >
Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.
Примечание: вы можете посмотреть живой пример на этом этапе на 5_z-index.html (см. исходный код).
Фиксированное позиционированиее
А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.
Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.
А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:
body width: 500px; height: 1400px; margin: 0 auto; >
Теперь мы собираемся дать элементу (en-US) position: fixed; , а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:
h1 position: fixed; top: 0; width: 500px; margin-top: 0; background: white; padding: 10px; >
top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.
Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:
p:nth-of-type(1) margin-top: 60px; >
Теперь вы должны видеть законченный пример:
h1>Fixed positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned">I'm not positioned any more. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p>
body width: 500px; height: 1400px; margin: 0 auto; > p background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span background: red; border: 1px solid black; > h1 position: fixed; top: 0px; width: 500px; background: white; padding: 10px; > p:nth-of-type(1) margin-top: 60px; >
Примечание: вы можете посмотреть живой пример на этом этапе на 6_fixed-positioning.html (см. исходный код).
position: sticky
Доступно другое значение позиции называемое position: sticky , которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.
h1>Sticky positioningh1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> div class="positioned">Stickydiv> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p>
body width: 500px; margin: 0 auto; > .positioned background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; >
.positioned position: sticky; top: 30px; left: 30px; >
Интересное и общее использование position: sticky заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:
h1>Sticky positioningh1> dl> dt>Adt> dd>Appledd> dd>Antdd> dd>Altimeterdd> dd>Airplanedd> dt>Bdt> dd>Birddd> dd>Buzzarddd> dd>Beedd> dd>Bananadd> dd>Beanstalkdd> dt>Cdt> dd>Calculatordd> dd>Canedd> dd>Cameradd> dd>Cameldd> dt>Ddt> dd>Duckdd> dd>Dimedd> dd>Dipstickdd> dd>Dronedd> dt>Edt> dd>Eggdd> dd>Elephantdd> dd>Egretdd> dl>
CSS может выглядеть как показано ниже. В нормальном потоке элементы будут прокручиваться вместе с контентом. Когда мы добавляем position: sticky к элементу , вместе со значением top 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.
dt background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; >
body width: 500px; height: 1400px; margin: 0 auto; > dt background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; >
h1>Sticky positioningh1> dl> dt>Adt> dd>Appledd> dd>Antdd> dd>Altimeterdd> dd>Airplanedd> dt>Bdt> dd>Birddd> dd>Buzzarddd> dd>Beedd> dd>Bananadd> dd>Beanstalkdd> dt>Cdt> dd>Calculatordd> dd>Canedd> dd>Cameradd> dd>Cameldd> dt>Ddt> dd>Duckdd> dd>Dimedd> dd>Dipstickdd> dd>Dronedd> dt>Edt> dd>Eggdd> dd>Elephantdd> dd>Egretdd> dl>
Липкие элементы являются «липкими» относительно ближайшего предка с «прокручивающимся механизмом», который определяется свойством позиции его предка.
Примечание: вы можете посмотреть живой пример на этом этапе на 7_sticky-positioning.html (см. исходный код).
Проверь свои навыки!
Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.
Заключение
Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.
Смотрите также
- Справка свойства position .
- Примеры практического позиционирования, для дополнительных полезных идей
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 2 дек. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как сделать ссылку на верх веб-страницы?
Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.
Для создания такой ссылки, в её адресе достаточно указать #top (пример 1). Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.
Пример 1. Ссылка на верх
Здесь элемент используется для искусственного создания длинной веб-страницы, чтобы стал заметен переход от нижней к верхней части документа. Заметьте также, что какая-либо дополнительная разметка не требуется.
Если необходимо сделать переход к определённому месту, то его сперва следует обозначить с помощью атрибута id, задав ему уникальное имя:
После этого в ссылке мы можем указать это имя следующим образом:
Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к добавляем событие onclick, внутри которого пишем window.location.href со значением #top (пример 2).
Пример 2. Кнопка на верх
При написании значения onclick обратите внимание на комбинацию двойных и одинарных кавычек. Если кнопка не работает должным образом, кавычки надо проверить в первую очередь.
См. также
- text-decoration-skip-ink
- Атрибуты
- Атрибуты ссылок
- Использование :hover
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Наследование в CSS
- Событие onclick
- Создание кнопок
- Создание ссылок
- Ссылки
- Ссылки
- Ссылки в HTML
- Якоря
Урок 27. Ссылка «Наверх страницы»
Иногда страница сайта может быть очень длинной. Например, если вы захотите выложить очень много текста. Для возвращения вверх можно воспользоваться колесом прокрутки, или бегунком. Но на многих сайтах для возвращения назад существует соответствующая ссылка или кнопка, нажав на которую, вы даёте команду браузеру и он быстро возвращает страницу в исходное положение.
Подобную ссылку можно прописать минимум четырьмя способами. рассмотрим их преимущества и недостатки.
Пропишем ссылку подобно тому, как прописываются «якоря» для страницы, о которых шла речь в Уроке 16 Выглядеть это будет так:
Вверху страницы вы ставите «якорь». Например, я поставила в него часть заглавия страницы: «В этом разделе. «
Внизу страницы вы помещаете ссылку «НАВЕРХ»:
У этого способа есть один недостаток. Браузеры не всегда адекватно себя ведут с подобными ссылками. Например, если вы наведёте курсор мыши на надпись вверху страницы «В этом разделе» — то скорее всего вы увидите, что помещённая в «якорь» часть фразы начинает отображаться, как ссылка.
Для того, чтобы ничего такого не происходило и не нужно было искать, что бы поместить в «якорь», можно поступить по способу 2.
Можно попробовать просто разместить внизу станицы ссылку вида:
Теоретически, ни один браузер не должен возражать против такого способа и по клику возвращать страницу в исходное положение. Но более надёжно поступить следующим образом, который мы рассмотрим в способе 3.
Разместим внизу страницы ссылку вида:
При данном способе мы задействуем указание на прокрутку-возвращение по клику, где значения (0,0) — это перемотка страницы на указанное количество пикселей по горизонтали и вертикали. Если мы обнулим эти значения, то любой браузер воспримет нашу ссылку как указание вернуться в исходное положение, то есть, на начало страницы. И наконец, чуть отличающийся четвёртый способ.
Этот способ основан на JavaScript и так же, как предыдущий, однозначно работает в любом браузере. В низу страницы, под вашим текстом или картинками вы размещаете следующую конструкцию:
Здесь, как видите, тоже есть указание на то, чтобы прокрутить страницу на указанные пикселы (0,0), которые мы обнуляем и в результате, когда мы нажимаем на данную ссылку, браузер возвращает страницу в первоначальное положение.
Само собой, во всех указанных способах можно вместо слова «НАВЕРХ» расположить картинку, обозначающую возвращение к началу страницы.
Примечание: вместо надписи «НАВЕРХ» (Вернуться к началу, Вверх, К оглавлению и т.п.) вы можете поставить картинку, вписав её код вида
Кнопка «ВВЕРХ» для сайта
Чтобы пользователь дойдя до конца страницы не уходил с сайта, применяют несколько уловок, например, размещают блок с похожими статьями, или плавающее меню, или ссылку к началу веб-документа. Как её сделать?
Для того, чтобы она перемещалась вместе с прокруткой страницы (см. CSS) и появлялась не сразу, а только после прохождения первого экрана (см. JavaScript) добавим перед
Для Blogger все три части кода вносим в гаджет HTML/JavaScript, который нужно добавить сразу под «Сообщения блога», если боковая колонка расположена справа. 
Или в левую панель, если она присутствует. 
125 комментариев:
Мич Класс! Спасибо! Суперовская фишка! NMitra Да, мне тоже понравилась. Rain Спасибо очень не хватало этой функции. NMitra По другому спозицианируйте элемент:
#back-top position: fixed;
position: fixed; left: 0%; top: 97%;
>
#back-top position: fixed;
margin-left: -100px;
bottom: 0px;>
А то у вас кнопка наезжает на левое меню. И либо добавите скрипт, либо
Rustem Zakirov Здравствуй, Наталья. Понравилась кнопочка наверх, но не знаю как поменять цвет. Вот ссылка на блог http://6tonn-kazan.blogspot.com/2011/05/blog-post_17.html (посмотри цвет плиз), как думаеш будет лучше? В тон блога стрелка и надпись (наверх) ярко синию сделать, или другой цвет выбрать? Потом, возможно ли квадратик вокруг трелки сделать прозрачнымЮ чтобы только стрелка была видна?
Подскажи плиз как поменять.
Спасибо. NMitra При работе с цветом мне помогают программы Colorpicker и Фотошоп — http://shpargalkablog.ru/2010/07/instrumenty-vebmastera-s-nulya.html.
Есть небольшая проблема: стрелка — это картинка, поэтому нужно либо искать в интернете другую картинку более подходящую под дизайн блога, либо открывать Фотошоп и редактировать эту — вот её адрес — http://www.mundodarkness.com.br/gd/topo.png.
Цвет квадратика определяется строкой:
background: #ddcca3 url(http://www.mundodarkness.com.br/gd/topo.png) no-repeat center center;
Уберите #ddcca3 совсем.
При наведении на ссылку фон квадрата:
#back-top a:hover span background-color: #777;
>
Аналогично: либо удалите, либо измените на свой.
А при наведении
#back-top a:hover color: #000;
>
Здесь найдёте коды веб-безопасных цветов — http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html#Photoshop-PNG-8. Выше можете скачать Фотошоп.
А здесь http://shpargalkablog.ru/2011/04/fotoshop-s-nulya.html небольшой урок по Фотошопу, хотя вам понадобятся только карандаш да пипетка.
После того, как выберите/нарисуете картинку, загружаете её в Blogger и меняете адрес с http://www.mundodarkness.com.br/gd/topo.png на свой. Rustem Zakirov Спасибо огромное. Rustem Zakirov Не, всё таки вы самая лучшая. Ваш блог это чудо. Я столько перерыл в инете в поиске помощи, но не нашёл за всё время столько, сколько у вас за несколько дней. Самое главное оперативные ответы на вопросы. Ещё раз спасибо и удачи. NMitra Благодарю за столь лестный отзыв))) PANIC а можно как ВКонтакте сделать кнопку? чтобы не в определенное место ставить ссылку «наверх», а чтобы та двигалась вместе с прокручиванием страницы?
кстати, интересная стрелка у Вас внизу) NMitra Конечно. См. статью, где задаём
style=»position: fixed; left: 93%; top: 97%;» PANIC но его нельзя на все страницы поставить?
и второй вариант, со стрелочкой. у меня трудность с расположением.
если задавать margin-left: -100px; то элемент находится слева от ПРАВОЙ границы тела сообщения (т.е. наезжает на текст сообщений), а не от левой, как у Вас здесь. если же задавать margin-right: -100px; то все нормально (справа от правой границы), но у меня боковая панель справа, поэтому стрелка наезжает на нее. может я не очень грамотно изъясняюсь, но как-то так. и пришлось задавать огромную величину этого отступа.
если же использовать не margin-left, а position: fixed; left: 0%; top: 97%; то стрелка будет прижата не к краю области текста, а к краю окна браузера.
и еще стрелка «скрывается» за нижней панелью.
и такой неприятный момент — если использовать этот вариант с использованием jQuery (или любой другой скрипт с jQuery), то не работает предложенный Вами вариант скрытия текста, где используется Googlа библиотеке API.
однако у Вас в одном блоге все вместе работает. это благодаря условным конструкциям, я полагаю? потому что кнопок «наверх» на других страницах в этом блоге я пока не заметила. NMitra Пока скрипт оставим на время — недавно посмотрела в Хроме — стрелку не видно. Скрипт только убирает стрелку вначале страницы.
Точно! Условные теги — это моё спасение. Некоторые скрипты работают в теле сообщения (не в head) и поэтому я их добавляю при написании статьи.
Всё верно, ты уже настоящий спец! margin-left: -100px; — это смещение влево. Оно должно быть равно ширине статьи, если его добавлять в гаджет. Я внедрила его в статью, поэтому смещение у меня меньше.
Чтобы не использовать скрипт, но оставить всё те же стили:
Гунь Ольга СПАСИБО. NMitra Рада помочь! Laterna Magica Наталья, помогите, спасите мой экспериментальный блог ))
Стрелка постоянно высвечивается :\ Порылся в кодах, никак не понял, что нужно менять и что указывать. Стрелка все равно видна, и в начале страницы и в конце. Как сделать, чтобы она появлялась только во время прокрутки страницы вниз, а в начале страницы исчезала, вот к примеру как у вас. Помогите справиться с этим. NMitra Скрипт добавляли? К сожалению, сейчас ссылки на вашем блоге не вижу, поэтому трудно сориентироваться, где был допущен промах. Laterna Magica Спасибо Наталья за оперативность. Вы просто чудо. Когда вы отзываетесь на наш зов — сразу становится спокойно, так как уверен, с вами решим любую задачу и головоломку) Наталья, а скрипт нужно добавлять и в том случае, когда добавляем CSS? и что мне сделать, чтобы вы увидели ссылки? Laterna Magica Наталья )) Разобрался! Ваш совет очень помог. Всё идеально работает! Спасибо вашему блогу. NMitra Нужно было добавить элемент на страницу, чтоб можно было его подправить.
Вот и замечательно, что разобрались. Vlsu Огромное спасибо! Давно искал подобную конструкцию. Правда, кнопку разместил справа, а не слева NMitra Рада помочь! О нас Наталья! Вставила код «наверх» в боковой гаджет- не то. А куда вставить , чтобы как у вас — не знаю. Спасибо! NMitra Я вставляла прямо в тело сообщения. Можно в гаджет, но значения margin-left: -100px; нужно увеличить на ширину сообщения. Цифра получиться больше -1000px в зависимости от вашего шаблона. О нас Вставила в тело сообщения! Получилось! Опять вопросы:этот код нужно вставлять в каждое сообщение? Ещё у меня уходит много времени на вставление кодов «твит», «поделиться», » треугольнички» и т.д. По многу раз захожу в черновик. оттуда копирую готовый код, потом вставляю. Может можно как то по другому? NMitra Можно добавить в шаблон «Дизайн»-«Изменить HTML». См. http://shpargalkablog.ru/2011/03/kak-sdelat-odin-raz-na-vse-stati.html О нас Наталья! Видимо мне туго даётся! Сначала долго искала h2. Пыталась вставить этот код твит между h2. Увы! Может что то в коде надо поменять? NMitra Ай-яй, нельзя добавлять такие элементы в заголовки уровней h1-h6, только текст. Внесите после h2. Иногда нужно преобразовать код с помощью CoderHTML — http://shpargalkablog.ru/2010/07/instrumenty-vebmastera-s-nulya.html, особенно скрипты. Я пробую эмпирическим путём.
Для поиска используйте сочетания клавиш CTRL+F и в открывшееся окошко вводите h2.
Чтобы выровнять твит справа, найдите примерно такой код и добавьте выделенное жирным
h2 font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
float: left;
>
Обязательно спрашивайте, отвечу. Иначе вконец можно запутаться. Я не всегда верно могу оценить знания читателя, поэтому могу что-то пропустить. О нас Прошла по ссылке. Вставила рекомендуемый код, выделенный синим. Потом вставила после код твита. Но на странице он не появился. NMitra Я поняла в чём дело, там несколько вхождений. Уберите предыдущие изменения. И добавьте выделенное жирным
</div></div>
<div />
<a href=»http://twitter.com/share» data-url=»<data:post.url/>» data-text=»<data:post.title/>» data-count=»horizontal» data-lang=»ru»>Твитнуть</a><script type=»text/javascript» src=»http://shpargalkablog.ru/2011/05/http://platform.twitter.com/widgets.js»></script>.twitter-share-button
<a href="http://twitter.com/share" data-url="" data-text="" data-count="horizontal" data-lang="ru">Твитнуть</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>.twitter-share-button О нас Наталья! Мой случай, наверное,клинический! Сразу нашла куда вставить( ценный Ваш совет по поиску).Скопировала код. вставила. Опять ничего.Вставила другой. Ничего. Уже Вас достала! И все таки хочу вставить «поделиться», «наверх» и «твит». NMitra Зайдём с другого края. Заведите какой-нибудь тестовый блог. Установите этот шаблон. Посмотрите как там, ориентируясь на комментарий 30 и 32.
В реальных условиях легче понять в чём дело. Получилось? О нас Получилось! Спасибо! И на тестовом и на основном. Я даже вставила немножко в другое место и твит встал ниже даты, над заголовком. Выровнять к правому краю не получилось. А куда теперь вставить «наверх» и » поделиться» ? Людмила и Владимир Казанцевы. А в ещё один блог не вставляется. там нет строчки «пост ДатаСтарт» Людмила и Владимир Казанцевы. Нашла «ДатаСтарт»! Забыла поставить галочку «расширить». NMitra По-поводу «поделиться» мне нравится как здесь — http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html#yandex
Кнопку «наверх» — до или после . NMitra Во втором блоге твит я вижу аж два раза. О нас Да! Один в сообщение вставила раньше. Старым способом. Надо убрать.Спасибо! Людмила и Владимир Казанцевы. Наталья! Выручайте! Убирала из каждого сообщения «поделиться» и «твит» и где то убрала лишнюю строчку HTML. Теперь профиль в самом низу! Что делать? Я в панике! О нас Наталья! Проблема, кажется, в строчке , В конце текста, где есть «utf-8» . Где то она есть, а где то нет . Кошмар! Я разрулю? Людмила и Владимир Казанцевы. Причём , если смотреть не всю ленту на главной, а по одному сообщению, бок на месте. Жду ваш волшебный совет! NMitra Не могу посмотреть, здесь шаблон нужен. Что делали с
Людмила и Владимир Казанцевы. Это я делала не » изменить HTML», а редактировании сообщений. Убирала «поделиться» снизу сообщения и «твит» сверху сообщения. А на странице » дизайн» — «изменитьHTML» у меня всё отлично получилось. Всё встало на свои места. Мне кажется загвоздка вот в этой строчке в конце сообщения.Там есть такой значок utf-8, ява скрипт. Где то она есть, а где то нет. ( сообщение с кусочком HTML почему то не посылается). Людмила и Владимир Казанцевы. А эта строчка в «изменить HTML» у меня такая же . Не изменённая. NMitra Это ошибка шаблона. Сбросьте мне на почту один из них. Якушевская Юлия Сергеевна Добрый день, у меня не получается. Все сделала как у вас, но стрелка не отображается http://yakushevskaya.blogspot.com/ NMitra Уберите одну строку
#back-top position: fixed;
margin-left: -100px;
bottom: 0px;>
#back-top position: fixed;
right: 93%;
bottom: 0px;> NMitra Два раза одна и та же строка в коде. Якушевская Юлия Сергеевна Спасибо, но стрелка так и не появилась. Как я понимаю, то она должна появиться на главной странице? NMitra Ой, только сейчас заметила: строчки
не хватает. Якушевская Юлия Сергеевна Спасибо, теперь появилась стрелочка. Якушевская Юлия Сергеевна Наталья, очень прошу помочь в одном деле. Хочу настроить навигацию на обычной странице, например здесь http://yakushevskaya.blogspot.com/p/blog-page_9305.html
Вначале сделать типа меню (года: 2007, 2008, . )
Нажимая на определенный год — > переходить к нему.
Я читала что-то у вас, но не поняла
С уважением, Якушевская Юлия NMitra Если я правильно поняла, вам нужны URL на страницы с архивом.
http://yakushevskaya.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00-08%3A00&updated-max=2012-01-01T00%3A00%3A00-08%3A00&max-results=11
http://yakushevskaya.blogspot.com/search?updated-min=2010-01-01T00%3A00%3A00-08%3A00&updated-max=2011-01-01T00%3A00%3A00-08%3A00&max-results=11
где max-results=11 — количество показываемых записей на одной страницы y.trubchyk Наталья. простите, что беспокою. но у меня никак не получается аналог Вашего примера. Можно , как-то показать код, а то только примитивный метод получился ( внизу блога и все), хочется плавающую стрелку. ) Спасибо за ранее.
вот блог http://bredstory.blogspot.com/ Irinka Story Ура-ура. Я в кодах,скриптах и д.т вообще ни бум бум а с Вашей помощью получилось. И цвет кнопочки подойдёт! Спасибо. y.trubchyk все. ) сделал..делаем новое что-то) Спасибо большое. NMitra Без моей помощи обошлось! На выходных, как правило, вне компьютера. Марсель Сакаев Спасибо огромное за кнопочку. А какой параметр отвечает за появление кнопки. Сейчас она появляется очень быстро. Хочу сделать так, чтобы она появлялась тогда, когда вниз прокручено 80% материала. NMitra В скрипте замените
if ($(this).scrollTop() > 100)
if ($(this).scrollTop() > 1000)
Или любую другую цифру. Марсель Сакаев Спасибо огромное )) У меня нет слов, чтобы выразить свою благодарность )) NMitra Как приятно это слышать) Irinka Story У меня всё распрекрасно работало, а позавчера заметила что сама стрелка пропала. Загрузила бекап когда всё работало, но все равно——(
Что делать? http://potapenkoira.blogspot.com/ NMitra С сайтом, откуда я позаимствовала рисунок, случилось какая-то неприятность. Замените http://www.mundodarkness.com.br/gd/topo.png на другой адрес, например, на http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png Irinka Story Спасибо огромное за помощь и мгновенную оперативность. а как такие стрелочки можно поискать, чтоб по дизайну подходило? Анонимный Доброго времени.
Вопрос такой, можно ли это сделать на обычной странице сайта?
У меня почему-то ничего не выходит. Хотя в html я не спец.
У меня только вверху в центре появляется (при прокрутке) ссылка «Наверх» и исчезает. Переместить ее не получается, а картинки, так вообще нет.
Вот что у меня получилось и в чем ошибка?
Если не трудно, подправите код.
Все <> заменил на *, а то не принимало сообщение.
*!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»*
*!— saved from url=(0014)about:internet —*
*html**head*
*meta http-equiv=»X-UA-Compatible» content=»IE=EmulateIE8″*
*meta http-equiv=»Content-Language» content=»ru»*
*meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″*
*title*Безымянная страница*/title*
*style type=»text/css»*
div#container
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
>
*/style*
*style type=»text/css»*
body
text-align: center;
margin: 0;
background-color: #FFFFFF;
color: #000000;
>
*/style*
*script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js»**/script*
// hide #back-top first
$(«#back-top»).hide();
// fade in #back-top
$(function () $(window).scroll(function () if ($(this).scrollTop() * 100) $(‘#back-top’).fadeIn();
> else $(‘#back-top’).fadeOut();
>
>);
// scroll body to 0px on click
$(‘#back-top a’).click(function () $(‘body,html’).animate( scrollTop: 0
>, 800);
return false;
>);
>);
>);
*/script*
*/head*
*body
#back-top position: fixed;
margin-left: -100px;
bottom: 0px;>
#back-top a width: 70px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
#back-top a:hover color: #000;
>
#back-top span width: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
#back-top a:hover span background-color: #777;
>
*div />*div style=»margin:0;padding:0;position:absolute;left:185px;top:4505px;width:459px;height:5px;text-align:left;z-index:0;»*
*img src=»http://shpargalkablog.ru/2011/05/%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B01_files/img0039.png» alt=»» title=»» style=»border-width: 0pt; width: 467px; height: 13px;»**/div*
*/div*
*/body*
*div style=»display: none;» href=»#»**span**/span*Наверх*/a**/div*
*/html* Анонимный Вот спасибо. Сообщение удалили и всё. Хоть бы пояснили, почему? Анонимный Меня не было в сети, а Blogger посчитал, что комментарий спамный. Конечно, можно:
body margin: 0;
background-color: #FFFFFF;
color: #000000;
>
/* не нужно text-align: center; */
div#container width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
>
/* тогда не нужно text-align: left; */
#back-top position: fixed;
margin-left: -100px;
bottom: 0px;>
#back-top a width: 70px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
#back-top a:hover color: #000;
>
#back-top span width: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
#back-top a:hover span background-color: #777;
>
#wb_Line1 margin: 0;
padding: 0;
position: absolute;
left: 185px;
top: 4505px;
width: 100%;
height: 100%;
>
/* здесь я не поняла что к чему, зачем делать высоту меньше высоты изображения */
// hide #back-top first
$(«#back-top»).hide();
// fade in #back-top
$(function () $(window).scroll(function () if ($(this).scrollTop() > 100) $(‘#back-top’).fadeIn();
> else $(‘#back-top’).fadeOut();
>
>);
// scroll body to 0px on click
$(‘#back-top a’).click(function () $(‘body,html’).animate( scrollTop: 0
>, 800);
return false;
>);
>);