Question

我在主页上创建了一个<a href="activity-areas/#autonomous-mobile-robot-systems">链接。我想通过此链接转到另一个页面上的分区。所以，活动区域页面的自治标题。正在工作，但引导导航栏下的标题固定顶部。

主页

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 featured">
<div class="container">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 featured-box">
        <a href="activity-areas/#autonomous-mobile-robot-systems">
        <h1>test 1</h1>
        <img class="img-responsive featured-image" src="#" alt="" title=""/>
        </a>
        <div class="featured-content">
            <p>
                Aenean vel tempor ex. Proin et ante ex. Aliquam sed.
            </p>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 featured-box">
        <a href="#" target="_blank">
        <h1>test 2</h1>
        <img class="img-responsive featured-image" src="#" alt="" title=""/>
        </a>
        <div class="featured-content">
            <p>
                Aenean vel tempor ex. Proin et ante ex. Aliquam sed.
            </p>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 featured-box">
        <a href="#" target="_blank">
        <h1>test 3</h1>
        <img class="img-responsive featured-image" src="#" alt="" title=""/>
        </a>
        <div class="featured-content">
            <p>
                Aenean vel tempor ex. Proin et ante ex. Aliquam sed.
            </p>
        </div>
    </div>
</div>

活动范围页面

    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <ul class="services-list">
            <li><a href="#autonomous-mobile-robot-systems">Otonom Mobil Robot Sistemleri</a></li>
            <li><a href="#three">three</a></li>
        </ul>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h2 class="widget-title" id="autonomous-mobile-robot-systems"><span>autonomous-mobile-robot-systems</span></h2>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <p>asdf</p>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
            <img class="img-thumbnail" src="#">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h2 class="widget-title" id="three"><span>three</span></h2>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">
            <img class="img-thumbnail" src="#">
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <ul>
                <li>asdf</li>
            </ul>
        </div>
    </div>
</div>

本节针对此页面。但标题是在导航栏下。我想给空间开销标题为120 px。

脚本

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top - 120
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>

适用于活动范围页面上的链接。此页面的顶部引荐中没有空间从主页重定向。

提前谢谢。

Answer 1

我改变了我的脚本如下。

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top - 120
                }, 1000);
                return false;
            }
        }
    });

    if (location.pathname.replace(/^\//,'') == 'activity-areas/') {

        var target = $(window.location.hash).offset();
        if (!jQuery.isEmptyObject(target)) {
            $('html,body').animate({
                scrollTop: target.top - 120
            }, 1000);
            return false;
        }
    }
});

这是一个糟糕的解决方案，但它解决了问题。直到更好：）

JQuery滚动到标题顶部空间，Bootstrap导航栏固定顶部

1 个答案: