Question

我正在创建一个带有固定导航栏的单页网站。当我加载页面并单击链接时，它会工作并向下移动到正确的链接。但是，当我点击另一个链接时，它会向上滚动到标题，之后任何链接都会滚动到页面的随机部分。

如何创建导航以便滚动到页面上的指定链接？

我正在使用jquery修复标题并平滑滚动。

HTML

$("input[name='rad-test-area']").on("change", function() {
    $("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text");
});

平滑滚动和固定标题Jquery

    <div id="container">
    <header>
        <div id="logo"><img src="img/logo.png"></div>
            <nav class="fixed-nav">
                <ul>
                    <li><a href="#about">About Me</a></li>   
                    <li><a href="#portfolio">Portfolio</a></li>  
                    <li><a href="#audio">Audio</a></li>  
                    <li><a href="#contMe">Contact Me</a></li>
                </ul>    
            </nav>
    </header>   
<div id="main">
        <section id="slider">
            <p>Slider here</p>
        </section>
        <section id="aboutMe">
        <a id="about" class="smooth"></a>
        <h1>About Me</h1>
        <p>about page here</p>
    </section>
    <section id="portfolio">
        <a id="portfolio" class="smooth"></a>
        <h1>Portfolio</h1>
        <p>portfolio page here</p>
    </section>
    <section id="Audio">
        <a id="Aud" class="smooth"></a>
        <h1>Munro Audio</h1>
        <p>Munro Audio page here</p>
    </section>
    <section id="contactMe">
        <a id="contMe" class="smooth"></a>
        <h1>Contact Me</h1>
        <p>Contact Me page here</p>
    </section>
</div>    
</div>

CSS

    <!-- smooth scroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
    //Fixed Header 

var headerHeight = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > headerHeight) {
    $('nav').addClass('fixed-nav');
  } else {
    $('nav').removeClass('fixed-nav');
  }
});
</script>

Answer 1

我不确定这是否正确，但我认为你想要一个粘性导航。

我已将您的CSS编辑到以下内容：

.fixed-nav {
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
}

如果您不想使用更多JQuery，那么就有本指南。

JQuery Sticky Nav

Answer 2

jsFiddle

我删除了<a id="about" class="smooth"></a>这样的行，并将导航链接指向了部分ID，它似乎对我来说很好。如果重要，我正在使用Chrome Version 52.0.2743.116 m。我还为滑块添加了一个偏移量，它考虑了标题的高度：

'scrollTop': $target.offset().top - $('header').height()

HTML

<div id="container">
    <header>
        <div id="logo"><img src="img/logo.png"></div>
            <nav class="fixed-nav">
                <ul>
                    <li><a href="#about">About Me</a></li>   
                    <li><a href="#portfolio">Portfolio</a></li>  
                    <li><a href="#audio">Audio</a></li>  
                    <li><a href="#contactMe">Contact Me</a></li>
                </ul>    
            </nav>
    </header>   
<div id="main">
        <section id="slider">
            <p>Slider here</p>
        </section>
        <section id="about">
        <h1>About Me</h1>
        <p>about page here</p>
    </section>
    <section id="portfolio">
        <h1>Portfolio</h1>
        <p>portfolio page here</p>
    </section>
    <section id="audio">
        <h1>Munro Audio</h1>
        <p>Munro Audio page here</p>
    </section>
    <section id="contactMe">
        <h1>Contact Me</h1>
        <p>Contact Me page here</p>
    </section>
</div>    
</div>

的Javascript

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - $('header').height()
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
    //Fixed Header 

var headerHeight = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > headerHeight) {
    $('nav').addClass('fixed-nav');
  } else {
    $('nav').removeClass('fixed-nav');
  }
});

固定导航工作一次然后中断

2 个答案: