Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Якорь в Bootstrap3
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Якорь в Bootstrap3

Страниц (1): [1]
 

1. federal_kaz - 22 Февраля, 2016 - 20:09:14 - перейти к сообщению
Доброго времени суток!

Верстаю шаблончик на бутстрапе3, бьюсь уже часа 3. Хочу настроить перемещение по странице с помощью якоря. Проблема заключается в том, что страница прокручивается не совсем в то место, куда хотелось бы.

Якори пишу так:
CODE (html):
скопировать код в буфер обмена
  1. <h2 id="top1">Текст</h2>


Ссылку на якори так:
CODE (html):
скопировать код в буфер обмена
  1. <a href="#top1">Ссылка</a>


Вот картинка, до куда опускается в браузере страница отмечено зелёной горизонтальной линией. До куда я хочу - красной.

https://yadi[dot]sk/i/1BxuCavPpKJXN

Получается так, что браузер опускает страницу ниже нужного места. Как мне сделать так, чтобы пролистывал до красных линий? не ниже.
2. DelphinPRO - 22 Февраля, 2016 - 21:11:41 - перейти к сообщению
При чем здесь бутстрап???
Я вас спрашиваю - ПРИ ЧЕМ ЗДЕСЬ БУТСТРАП?????????

Якори в html существовали испокон веков, в самых первых спецификациях. Бутстрапом тогда еще и не пахло. Тогда вообще ничего не было. Только якори... )

Воооот. Теперь выкидываем бутстрап из головы, и думаем, почему же страница прокручивается не туда? (даю подсказку - она на самом деле прокручивается туда куда и должна - в место нахождения якоря).
3. IllusionMH - 23 Февраля, 2016 - 02:58:00 - перейти к сообщению
federal_kaz, а у меню случаем не стоит position:fixed?
4. federal_kaz - 23 Февраля, 2016 - 03:43:35 - перейти к сообщению
IllusionMH пишет:
federal_kaz, а у меню случаем не стоит position:fixed?


Теперь понял в чём корень зла. Да, у меня менюшка плавающая с position:fixed. Она то и перекрывает те самые 50 пикселов нужной мне части. Вот только пока ума не приложу как это вылечить в данной ситуации. Со слайдером решил эту проблему данной строчкой в css:

CODE (html):
скопировать код в буфер обмена
  1. body {
  2.         padding-top:50px;
  3. }


А то закрывала верх картинки.
(Добавление)
DelphinPRO пишет:
При чем здесь бутстрап???
Я вас спрашиваю - ПРИ ЧЕМ ЗДЕСЬ БУТСТРАП?????????

Якори в html существовали испокон веков, в самых первых спецификациях. Бутстрапом тогда еще и не пахло. Тогда вообще ничего не было. Только якори... )

Воооот. Теперь выкидываем бутстрап из головы, и думаем, почему же страница прокручивается не туда? (даю подсказку - она на самом деле прокручивается туда куда и должна - в место нахождения якоря).


А при том, чтобы довольно быстро решить проблему, достаточно указать все имеющиеся параметры. Чтобы люди не гадали на кофейной гуще, какие у меня стили прописаны)) Написал бутстрап - IllusionMH сразу догадался)
5. federal_kaz - 23 Февраля, 2016 - 07:36:50 - перейти к сообщению
Советуют использовать следуюший стиль:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. *[id]:before {
  3.   display: block;
  4.   content: " ";
  5.   margin-top: -50px;
  6.   height: 50px;
  7.   visibility: hidden;
  8. }
  9.  


Так что проблема с перемещением в нужное место решена, но породилась новая проблема (делается вставка лишних 50пикселей). Теперь буду придумывать как решить.
6. DelphinPRO - 23 Февраля, 2016 - 12:10:47 - перейти к сообщению
А просто сделать отдельный пустой элемент-якорь, задать ему релатив и сместить в нужное место не пробовали?

Я бы взял плагин jquery.scrollTo.js для навигации по странице. Плавная прокрутка, любая коррекция прокрутки.
7. federal_kaz - 23 Февраля, 2016 - 12:37:50 - перейти к сообщению
DelphinPRO пишет:
А просто сделать отдельный пустой элемент-якорь, задать ему релатив и сместить в нужное место не пробовали?

Я бы взял плагин jquery.scrollTo.js для навигации по странице. Плавная прокрутка, любая коррекция прокрутки.


Вот как раз у пустого отдельного белая полоса, если вешаю якорь к элементам моей полосы - он так же добавляет 50 пикселей, только наследует свойства родителей и получается полоса растянутой.

А вот про плагин - это идея. Сейчас попробую этот вариант. Спасибо за подсказку, о результате потом отпишусь.
8. Ch_chov - 23 Февраля, 2016 - 12:55:01 - перейти к сообщению
Цитата:
делается вставка лишних 50пикселей
Уберите visibility: hidden; и сделайте content: ""; (без пробела). Получится тоже самое, только без побочных эффектов.

http://stackoverflow[dot]com/a/9618795/272927
9. IllusionMH - 23 Февраля, 2016 - 14:01:34 - перейти к сообщению

federal_kaz, да я не по бутстрапу догадывался, а по типичным менюшкам и проблемам со скролом "под" такие фиксированные меню.
10. federal_kaz - 23 Февраля, 2016 - 17:28:13 - перейти к сообщению
Ch_chov пишет:
Цитата:
делается вставка лишних 50пикселей
Уберите visibility: hidden; и сделайте content: ""; (без пробела). Получится тоже самое, только без побочных эффектов.

http://stackoverflow.com/a/9618795/272927


Переделал свойства как указано в ресурсе по ссылке - работает как надо. Но теперь стоит попробовать заюзать jquery.scrollTo.js, чтобы сделать всё максимально красиво, да и опыт лишним не бывает.

Спасибо большое всем за помощь!!!

 

Powered by ExBB FM 1.0 RC1