Question

我想指向同一页面中的一部分。所以使用了锚方法。但问题是，我在顶部有一个静态导航栏。因此，由于锚点设置为标题，因此该部分的标题位于菜单栏下方。菜单栏的高度为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>

Answer 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语句中替换为空字符串。

锚定到同一页面

1 个答案: