锚定到同一页面[关闭]答案

【问题标题】：Anchoring to the same page [closed]锚定到同一页面[关闭]
【发布时间】：2014-02-19 17:54:11
【问题描述】：

我想指向同一页面中的某个部分。所以使用了anchor方法。但问题是，我在顶部有一个静态导航栏。由于锚点设置为标题，因此该部分的标题位于菜单栏下方。菜单栏的高度为100px。我想知道我们是否也可以显示这个标题？

如果您想了解更多详情，请告诉我。

<!---NAVIGATION BAR SECTION------>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html"><img id="logo" src="img/logo.png"></a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-left">
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="features.html">FEATURES</a></li>
                    <li><a href="pricing-and-signup.html">PRICING</a></li>
                    <li id="scroll2" class="navLog"><a href="https://my.clickmeter.com">LOGIN</a></li>
                    <li id="scroll3" class="navLog"><a href="pricing-and-signup.html">SIGN UP FREE</a></li>
                </ul>
            </div>
        </div>
    </div>
<!---NAVIGATION BAR ENDS------>

这是我想移至其他部分的导航部分

 <div class="jumbotron action-block-green ">
        <div class="container text-center">
            <div class="row">
                <div class="col-sm-8">
                    <ul class="nav navbar-nav navbar-left">
                        <li><a href="#technology">TECHNOLOGY</a></li>
                        <li><a href="#screenshot">SCREENSHOTS</a></li>
                        <li><a href="#features">FEATURES</a></li>
                    </ul>
                </div>
                <div class="col-sm-4">
                </div>
             </div>
        </div>
    </div>

我将第一个链接（技术）锚定到这里

<div class="jumbotron sectionBlock white ">
        <div class="container text-center">
            <h2  id="technology" style="color:#202020;margin-top: 0px;">Cutting-Edge Technology</h2>
            <h3>Accurate, Reliable, Scalable and Hi Performace</h3>
            <p style="margin:10px 0">blabhfufwehuf wiuefh wiu hfiuw fiuw fiuwhe fiwu hfiwue fhiwuh f</p>
            <div class="row" style="margin-top:20px;">
                <div class="col-md-4">
                    <div class="certified-uptime"></div>
                </div>
                <div class="col-md-4">
                    <div class="multiple-datacenters"></div>
                </div>
                <div class="col-md-4">
                    <div class="hosteb-by"></div>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

请包含相关的 HTML、CSS 和 Javascript。
一个小提琴会更好：jsfiddle.net
@RahulDesai - 不，问题应该总是包含相关代码，jsFiddle 是可选的。如果 jsFiddle 曾经消失或无法访问，那么问题就失去了所有价值。
好的，我现在将包含代码

标签： javascript html css

【解决方案1】：

我会使用 jQuery 进行滚动，并将 URL 中的锚点更改为 DOM 上不存在的元素，并为 id 或 name 提供相同的值。（这样滚动不会自动完成）

Living demo

$(window).on('hashchange',function(){
    //you can see it manually or calculate it using jQuery by using $.height();
    var header = 60; 

    //Getting the anchor and replacing the underscore
    var value =  window.location.hash.replace('_', ''); 

    //getting our destination     
    var dest = $(value).position();

    //if the element exist on the DOM
    if(typeof dest !== "undefined"){
         var dtop = dest.top;

         //proceeding to scroll
         $('html, body').animate({
            scrollTop: dtop - header
        }, 1000);

    }
});

我的示例中的链接看起来像 #_link1，并且需要出现在 DOM 中的 id 应该像 id="link1:

<div id="menu">
    <a href="#_link1">Link 1</a>
    <a href="#_link2">Link 2</a>
    <a href="#_link3">Link 3</a>
</div>
...
<h1 id="link1>Link 1</h1>

当然，您可以将 URL 上的下划线 (_) 更改为您想要的任何其他字符或符号。只需确保将其替换为我提供的代码的 replace 语句中的空字符串即可。

【讨论】：