web-dev-qa-db-ja.com

Divアンカーのスクロールが長すぎる

私はサイトの上部に、高さ約20ピクセルの静的なバーを使用しています。アンカーリンクをクリックすると（知らない人のために、ウィキペディアのナビゲーションはそのように機能します。タイトルをクリックすると、ブラウザが下に移動します）、テキストの一部がそのトップバーの後ろに消えます。

これを防ぐ方法はありますか？私はiFrameを使用できる立場にありません。私が考えることができるのは、毎回少しスクロールバックすることだけですが、別の方法がありますか？体または何かを操作するためのCSS設定？

cssanchor
24
Koen027

CSSでこれを修正するには、ジャンプ先の要素にパディングを追加します。

例

または、ボーダーを追加することもできます。

div{ 
  height: 650px; 
  background:#ccc; 
  /*the magic happens here*/
  border-top:42px solid #fff;
}
ul{
  top: 0; 
  width: 100%; 
  height:20px; 
  position: fixed; 
  background: deeppink; 
  margin:0;
  padding:10px; 
}
li{
  float:left;
  list-style:none;
  padding-left:10px;
}
div:first-of-type{ 
  margin-top:0; 
}
<!-- content to be placed inside <body>…</body> -->
<ul>
  <li><a href="#s1">link 1</a>
  <li><a href="#s2">link 2</a>
  <li><a href="#s3">link 3</a>
  <li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>

ただし、これは常に適用できるわけではありません。

JavaScriptソリューションの場合、アンカー要素に付加されたクリックイベントを使用して、次のように調整された量のピクセルをスクロールできます。

document.querySelector("a").addEventListener("click",function(e){
    // dynamically determining the height of your navbar
    let navbar = document.querySelector("nav");
    let navbarheight = parseInt(window.getComputedStyle(navbar).height,10);
    // show 5 pixels of previous section just for illustration purposes 
    let scrollHeight = document.querySelector(e.target.hash).offsetTop - navbarheight - 5;
    /* scrolling to the element taking the height of the static bar into account*/
    window.scroll(0,scrollHeight);
    /*properly updating the window location*/
    window.location.hash = e.target.hash;
    /* do not execute default action*/
    e.preventDefault();
});
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:40px;
  text-align:center;
  background:#bada55;
  margin:0;
}
a{
  display:block;
  padding-top:40px;
}
#section1{
  height:800px;
  background:repeating-linear-gradient(45deg,#606dbc55,#606dbc55 10px,#46529855 10px,#46529855 20px);
}
#section2{
  height:800px;
  background:repeating-linear-gradient(-45deg,#22222255,#22222255 10px,#66666655 10px,#66666655 20px);
}
<nav>static header</nav>
<a href="#section2">jump to section 2</a> 
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
6
Christoph

JavaScriptなしでCSSを使用できます。

アンカーにクラスを与えます：

<a class="anchor"></a>

次に、アンカーをブロック要素にして相対的に配置することにより、アンカーを実際にページに表示される場所よりも高いまたは低いオフセットに配置できます。 -250pxはアンカーを250px上に配置します

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

1月までに htmlアンカーをオフセットして固定ヘッダーに調整する を参照

27
FredTheLover

CSS-only：少し汚れていますが、:target {padding-top: 20px;}は、ブロック要素にリンクしている場合に機能します（質問にdivと書かれているので、そうすると仮定しました）。ただし、後で手動でスクロールすると、見栄えがよくない場合があります。例 http://dabblet.com/Gist/3121729

それでも、私は少しのJavaScriptを使用してこれを修正する方が良いと思います。

7
Ana

同じ問題がありました。これがjQueryソリューションです

$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash;
    var $trget = $(target);
    // Example: your header is 70px tall.
    var newTop = $trget.offset().top - 70; 
    $('html, body').animate ({
        scrollTop: newTop
    }, 500, 'swing', function () {
        window.location.hash = target;
    }); 
});
3
PJ Brunet

window.scrollBy(xnum,ynum);で試してください

xnum：x軸に沿ってスクロールするピクセル数（水平）ynum：y軸に沿ってスクロールするピクセル数（垂直）

例： http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby

0
RAN