jquery - 点击后如何自定义页内链接相对于页面顶部的位置？

Question

我用 header 来固定它

.site-header {
 position: fixed;
    background-color:#ffffff;
    width:1020px;
    top:-20px;
    z-index:1;
}

我有包含两个 div 的 body 部分

这是在左边

<div id="sidebar" style="float:left" class="affix-top">
<div id="nav-anchor"></div>
<nav class="indexnav">
<ul id="indexlist">
<li id="one"><a href="#AdolescentGynecology">Adolescent gynecology</a></li>
<li><a href="#BreastEvaluation">Breast evaluation</a></li>
<li><a href="#BirthControl">Birth control/emergency contraception</a></li>

</ul>
</nav></div>

这是在右边

    <div id="indexcontent">
<section id="AdolescentGynecology" tabindex="-1">
                <span class="indexcontent-title">Adolescent gynecology</span><p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat est egestas, pretium tellus id, egestas mauris. Vestibulum porttitor, massa tristique sodales rutrum, ex elit pulvinar urna, at suscipit quam arcu a turpis. Suspendisse ut hendrerit ligula. Mauris at diam accumsan, mollis risus a, venenatis magna. Phasellus sem arcu, lobortis id sapien quis, fringilla faucibus nulla. Ut fermentum gravida sem non malesuada. Suspendisse potenti. Fusce ullamcorper elit at ornare lacinia. Curabitur sed feugiat magna. Nulla quis libero dignissim, maximus leo consectetur, laoreet massa. Maecenas et malesuada lacus. Morbi at condimentum ipsum. Morbi suscipit leo eros, vel hendrerit felis molestie nec. In nec maximus est.</p>
</section>
<section id="BreastEvaluation" tabindex="-1">
            <span class="indexcontent-title">Breast evaluation</span><p></p>
<p>Vivamus vitae quam ut nulla gravida sollicitudin. Integer congue mauris lectus, cursus ornare nulla scelerisque in. Suspendisse consectetur egestas pellentesque. Maecenas vulputate elit quis nunc iaculis, in malesuada nulla condimentum. Maecenas auctor quam libero, a condimentum purus eleifend ac. Donec vestibulum lectus quis risus condimentum suscipit. In hac habitasse platea dictumst. Etiam libero leo, molestie vel purus non, semper sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi orci, aliquam sed velit non, vulputate scelerisque metus. Sed vel libero quis nibh placerat bibendum.</p>
</section>
<section id="BirthControl">
             <span class="indexcontent-title">Birth control/emergency contraception</span><p></p>
<p>Vivamus vitae quam ut nulla gravida sollicitudin. Integer congue mauris lectus, cursus ornare nulla scelerisque in. Suspendisse consectetur egestas pellentesque. Maecenas vulputate elit quis nunc iaculis, in malesuada nulla condimentum. Maecenas auctor quam libero, a condimentum purus eleifend ac. Donec vestibulum lectus quis risus condimentum suscipit. In hac habitasse platea dictumst. Etiam libero leo, molestie vel purus non, semper sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi orci, aliquam sed velit non, vulputate scelerisque metus. Sed vel libero quis nibh placerat bibendum.</p>
</section>

现在，当我点击 div id="sidebar"中的一个

元素时，它应该导航到 href 位置。在这里，如果将引用的元素加载到窗口的顶部。我需要在浏览器中加载到给定的高度。我如何完成它？

Answer 1

我认为问题在于您的固定位置 header 与 div.content2 的顶部重叠。我注意到 .content1 的 css 中有错别字，我假设您指的是 float:left 而不是 float;left。

要将每个部分定位在页眉下方，而不是页眉遮挡部分的页面顶部，您可以将页面的 scrollTop 设置为该部分相对于 div.content2 减去的垂直偏移量标题的高度。这可以通过点击处理程序轻松处理。

//set the page scrollTop so the selected element appears just
//below the bottom of the fixed header
function scrollTo(contentEl) {

    //assume the href of the anchor is '#id'
    var el = $(contentEl.attr("href"));

    //don't do anything if the ID isn't found
    if (el.length > 0) {

      //height of the header may change if the window is resized
      //so recheck it with each scrollTo call
      var HeaderHeight = $(".header")[0].clientHeight;

      //set the top margin on content2 so the first element
      //displays properly on page load
      $(".content2").css({"margin-top":HeaderHeight+"px"});

      var pos = el.position();
      var newtop = pos.top - HeaderHeight;

      //scrolling above the top is probably silly  
      if (newtop < 0) newtop = 0;

        console.log($(".content2").position().top+ ". "+el.attr("id")+ ": "+$("html").scrollTop()+" - "+pos.top+" - "+newtop);
      $("html").scrollTop(newtop)

      //return false to cancel the href if we scrolled
      return(false);
    }
}

$(document).ready(function(){

    $(".content1").affix();

    //use scrollTo to handle click events on nav anchors
    $(".content1 ul").on("click","a",function(){return scrollTo($(this))})

    //set top margin of .content2 so first element appears below the header
    $(".content2").css({"margin-top":$(".header")[0].clientHeight+"px"})

});

更新jsfiddle