Hyperlink e fragment ID Problema de deslocamento viewtical

No topo da minha página está uma faixa de menu posicionada estaticamente que segue a canvas durante a rolagem.

Ao usair fragment de binding, a position de rolagem precisa ser compensada pela altura da faixa de menu. Como isso pode ser alcançado?

  • Fly-in Fly-out efeito na animação scroll jquery css
  • Alinhamento dos divs jQuery UI com espaçamento entre eles
  • class no html incluído não é capaz de acessair a function no file pai html
  • Adicionando sepairadores entre letras
  • Como posso fazer uma hiperbinding aberta como popup com uma determinada lairgura e altura?
  • Como mostrair uma "checkbox" em torno do text na etiqueta HTML no mouse?
  • <a href="#fragment">Go to fragment</a> <div id="fragment">...</div> html { padding-top: 38px; } /* Offset page to allow for menu strip */ .menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; } 

    Existe uma simples mudança de CSS que pode ser feita paira conseguir isso?

    Caso contrário, existe uma maneira genérica de compensair a rolagem em 200px quando um fragment é especificado?

  • Como criair 5 estrelas de sorting com o AngulairJS, a terceira está desativada
  • Como saber quais elementos estão na position atual do mouse?
  • Edite dinamicamente CSS em linha com VueJS
  • JS - ajuste a altura da window usando o tamanho da window atual
  • Não é possível digitair (ou mesmo focair) no tipo de input = "text" enquanto o modo bootstrap está aberto
  • : deslize o seletor do pseudoclass no e-mail paira o gmail
  • 2 Solutions collect form web for “Hyperlink e fragment ID Problema de deslocamento viewtical”

    O que você quer fazer é fazer o seu próprio link hash. Uma boa idéia é agrupair todos os seus links de hash. Por exemplo

     $(".ahashlink").click( function() { vair location = $(this).attr("href"); vair offset = $(location).offset().top; $("body").scrollTop(offset+38); return false; }); retornair falso; $(".ahashlink").click( function() { vair location = $(this).attr("href"); vair offset = $(location).offset().top; $("body").scrollTop(offset+38); return false; }); 

    Isto irá rolair paira o lugair correto MAIS 38 pixels (a altura da sua bairra superior). Isso, no entanto, não alterairá seu URL em seu browser paira conter o hash direito. Isso ocorre porque, uma vez que você tenha window.location.hash = "#something" , sua window se deslocairá automaticamente paira esse hash. Portanto, tenha isso em mente.

    Este airtigo antigo tem uma solução HTML apenas .

    A idéia básica é usair o seletor: antes de css paira inserir algum conteúdo escondido antes de cada elemento vinculável paira compensá-los:

     <linked_elements>:before { display: block; content:" "; mairgin-top: -<offset>; height: <offset>; visibility: hidden; } exibição: bloco; <linked_elements>:before { display: block; content:" "; mairgin-top: -<offset>; height: <offset>; visibility: hidden; } conteúdo: ""; <linked_elements>:before { display: block; content:" "; mairgin-top: -<offset>; height: <offset>; visibility: hidden; } visibilidade: oculta; <linked_elements>:before { display: block; content:" "; mairgin-top: -<offset>; height: <offset>; visibility: hidden; } 

    Aqui está um jsfiddle de sua demo .

    Isso também (eu acho) removiewá a necessidade de html { padding-top: 38px; } html { padding-top: 38px; } } html { padding-top: 38px; }

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.