Div anchors scrolling too far

后端未结

关注

 5  1541

I\'m using a static bar at the top of my site, about 20px high. When I click an anchor link(for those who don\'t know, the navigation on wikipedia works like that. Click a t

相关标签:

5条回答

难免孤独

2020-12-25 12:10

I had the same problem. Here's a jQuery solution

$('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;
    }); 
});

0 讨论(0)

青春惊慌失措

2020-12-25 12:22

To fix this with CSS you can add a padding to the Elements you want to jump to:

Example

Alternatively, you could add a border:

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>

However, this is not always applicable.

For a javascript solution you could use a click event attached to the anchor elements that scrolls an adjusted amount of pixels like following:

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>

0 讨论(0)

迷失自我

2020-12-25 12:23
You could just use CSS without any javascript.

Give your anchor a class:
```
<a class="anchor"></a>
```
You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px
```
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
```
By Jan see offsetting an html anchor to adjust for fixed header
0 讨论(0)
发布评论:

提交评论
- 加载中...
太阳男子

2020-12-25 12:25

CSS-only: it's a little dirty, but :target {padding-top: 20px;} would work if you are linking to a block element (I assumed you do, since your question says div). However, it might not look so good when you scroll manually afterwards. Example http://dabblet.com/gist/3121729

Still, I think that using a bit of JavaScript to fix this would be nicer.

0 讨论(0)
发布评论:

提交评论
- 加载中...
面向向阳花

2020-12-25 12:33

Try with window.scrollBy(xnum,ynum);

xnum: How many pixels to scroll by, along the x-axis (horizontal) ynum: How many pixels to scroll by, along the y-axis (vertical)

For example: http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby

0 讨论(0)
发布评论:

提交评论
- 加载中...