Come si naviga leggermente sopra un tag di ancoraggio?

So come navigare verso un determinato tag di ancoraggio su una pagina: quello che sto tentando di fare è collegare una parte della pagina che è 30-40 pixel sopra l'ancora di destinazione. Il motivo è che ho una navigazione bootstrap che finisce per coprire parte del contenuto pertinente se mi piace direttamente alla parte della pagina con l'ancora.Come si naviga leggermente sopra un tag di ancoraggio?

Attualmente ho questo per il collegamento:

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

e nella pagina si collega a:

.span12#how_it_works

Dei pensieri su come posso ottenere il link per passare a una sezione del pagina che è leggermente sopra il .span12 # how_it_works?

fonte

2013-04-07 Cam Norgate

Stai utilizzando twitter bootstrap? Se è così, tagga la tua domanda con essa. Stai usando [affix] (http://twitter.github.io/bootstrap/javascript.html#affix) per quello scopo? – Pigueiras

Potreste essere in grado di incidere intorno a questo con l'aggiunta di qualche chilo in più nel CSS, ma il modo più sicuro per farlo è con 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; 
    } 
});

Ecco codepen.

Questo utilizza una versione modificata di smooth scroll script di Chris Coyier. Mi sono preso la "morbidezza" fuori lo scorrimento, ma si potrebbe aggiungere indietro nel animando lo scrollTop in questo modo:

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

fonte

2013-04-07 01:57:59

Hai provato jQuery scrollTo plug-in? Sembra che questo sia stato usato con qualche ritocco per fare quello che vuoi. Vedere lo scenario/risposta qui Jquery ScrollTo issue

fonte

2013-04-07 01:58:49 Lawrence

Questo lavoro potrebbe funzionare?
live example
jsFiddle

Ho aggiunto un padding superiore agli ancoraggi:
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
Rileggendo la tua domanda, se il problema è che stai usando bootstrap con una barra di navigazione affissa e parte del contenuto della tua pagina è nascosta sotto la barra di navigazione, una soluzione ancora più semplice è aggiungere padding nella parte superiore della pagina corpo per spostare il contenuto della pagina in basso.

Se avete bisogno di fare questo in ogni pagina del sito, utilizzare:
CSS

body { 
padding-top:40px; 
}

Se avete solo bisogno di cancellare la barra di navigazione su pagine selezionate, aggiungere una classe al tag body sulle pagine incriminate e di destinazione solo le pagine specifiche, ad esempio
HTML

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

CSS

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

fonte

2013-04-07 03:34:43

ho avuto un'idea nifty per ingannare il browser. Non è necessario javascript.

Creare un tag div, dargli un nome. Il div è vuoto. Poi in CSS usa il posizionamento per muoverlo quanto lontano vuoi.

position: relative; 
top: -165px;

È possibile giocare con la posizione relativa o assoluta a seconda di dove si desidera.

Poi basta fare quel tag div tag di ancoraggio.

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

Quando si va all'ancora, esso andrà ovunque sia il tag div.

fonte

2014-04-28 22:59:56 Gu3miles

Gu3miles - questo ha funzionato perfettamente per me - sto usando le ancore con una barra di navigazione persistente.

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

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

fonte

2014-05-01 18:37:53 greg

Come si naviga leggermente sopra un tag di ancoraggio?

risposta

Problemi correlati