Как перейти к чуть выше метки привязки?

Я знаю, как перейти к определенному тегу привязки на странице - то, что я пытаюсь сделать, - это ссылка на часть страницы, которая на 30-40 пикселей выше целевого якоря. Причина этого в том, что у меня есть загрузочная навигация, которая заканчивается тем, что покрывает часть соответствующего контента, если мне нравится непосредственно часть страницы с помощью привязки.Как перейти к чуть выше метки привязки?

В настоящее время у меня есть это для ссылки:

%a{:href => root_path + "#how_it_works"} How It Works

и на странице это ссылки на:

.span12#how_it_works

Любые мысли о том, как я могу получить ссылку для перехода к секции страницы, которая немного выше .span12 # how_it_works?

источник

2013-04-07 Cam Norgate

Вы используете twitter bootstrap? Если это так, пометьте свой вопрос. Используете ли вы [affix] (http://twitter.github.io/bootstrap/javascript.html#affix) для этой цели? – Pigueiras

Вы могли бы взломать обойти это, добавив некоторые дополнительные прокладки в вашем CSS, но самый верный способ сделать это с помощью JavaScript:

$('a[href="#how_it_works"]').on('click',function(e){ 
    // prevent normal scrolling action 
    e.preventDefault(); 
    // grab the target url from the anchor's ``href`` 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
      window.scrollTo(0, target.offset().top - 50); // <-- our offset in px adjust as necessary 
     return false; 
    } 
});

Вот codepen.

Используется модифицированная версия Chris Coyier's smooth scroll script. Я взял на себя «гладкость» из прокрутки, но вы можете добавить его в анимируя в scrolltop как так:

if (target.length) { 
    $('html,body').animate({ 
     scrollTop: target.offset().top + 20 
    }, 1000); 
    return false; 
    }

источник

2013-04-07 01:57:59

вы пробовали JQuery scrollTo плагин? Похоже, что это использовалось с некоторой настройкой, чтобы делать то, что вы хотите. См. Сценарий/ответ здесь Jquery ScrollTo issue

источник

2013-04-07 01:58:49 Lawrence

Будет ли это работать на вас?
live example
jsFiddle

Я добавил верхнего отступа к якорям:
CSS

a.anchor{ 
background-color:pink; 
padding-top:30px; 
display:block; 
margin-top:-30px; /* if you want to cancel out the padding-top */ 
}

HTML

<a href="#section1">section1</a><br> 
    <a href="#section2">section2</a><br> 
    <a href="#section3">section3</a><br> 
    <a href="#section4">section4</a><br> 
    .... 
    <a name="section1" class="anchor">section1</a> 
    etc

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

Если вам нужно сделать это на каждой странице сайта, используйте:
CSS

body { 
padding-top:40px; 
}

Если вам нужно только очистить Navbar на выбранных страницах, добавить класс в тег тела на страницах обижая и цели только те конкретные страницы, например
HTML

<body class="welcome"> 
....

CSS

body.welcome { 
padding-top:40px; 
}

источник

2013-04-07 03:34:43

Я получил отличную идею, чтобы обмануть ваш браузер. Нет необходимости в javascript.

Создайте тег div, дайте ему имя. Пусть div пуст. Затем в CSS используйте позиционирование, чтобы переместить его, как далеко вы хотите.

position: relative; 
top: -165px;

Вы можете играть с относительной или абсолютной позицией в зависимости от того, где вы хотите.

Затем просто сделайте тег div тегом привязки.

<div class="anchor_placement" id="anchor"></div>

Когда вы идете на якорь, он будет идти туда, где находится тег div.

источник

2014-04-28 22:59:56 Gu3miles

Gu3miles - Это работало отлично для меня - я использую якоря с постоянной навигационной панелью.

.anchorplace{position: relative; 
top: -74px; } 

<div class="anchorplace" id="challenge"></div>

источник

2014-05-01 18:37:53 greg

Как перейти к чуть выше метки привязки?

ответ

Смежные вопросы