# リンク先の位置調整


[ページ内リンクの実装](https://tips.weseek.co.jp/%E9%96%8B%E7%99%BA%E6%97%A5%E8%A8%98/%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E5%AE%9F%E8%A3%85)でコメントの日付にリンクをつけた。
ここで問題になるのが、ジャンプ後の位置。

![Screen Shot 0002-04-13 at 23.55.54.png](/attachment/5e9511cb0804c600481af4af)  
reply３の日付リンクをクリックすると、コメントが固定表示されているフッダーと若干被ってしまう。
それを直すために、SCSSファイルに

```scss:_comment_growi.scss
.growi{

    //...省略...

    .page-comment {
        position: relative;
        padding-top: 70px;
        margin-top: -70px;
        
    //...省略...
}
```
を指定。


![Screen Shot 0002-04-14 at 0.00.37.png](/attachment/5e9511d40804c600481af4b0)  
すると、reply 3のコメントが綺麗に表示されるように！

paddingとmarginのサイズを調整することで、リンク先が綺麗に表示されるようにすることができる。

## 参照
[ページ内リンクのジャンプ先の位置を複雑なタグは無しでCSSだけで調整する方法](https://y-com.info/contents/?p=5641)

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/ページ内リンクの実装/リンク先の位置調整
- Permalink: https://tips.weseek.co.jp/5e9511cb0804c600481af4ad
- Parent: [ページ内リンクの実装](/5e93c9d511007300489677ff.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 0 total
- Last updated: 2020-04-14T01:30:40.282Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e9511cb0804c600481af4ad