导航锚标记不起作用，但是为什么呢？

Question

So I have a two page website. 所以我有一个两页的网站。 Home page has a one-page navigation ie when ' about ' is clicked it is scrolled down to the ' about ' div. 主页具有一页导航，即，单击“ 关于 ”时，将其向下滚动到“ 关于 ” div。

PART 1 - On index.html 第1部分-在index.html上

However when 'blog' navigation item is clicked it SHOULD go to blog.html. 但是，当单击“博客”导航项时，应转到blog.html。 In .header-nav I have the following <li><a href="blog.html">Blog</a></li> but isn't working. 在.header-nav我有以下<li><a href="blog.html">Blog</a></li>但不起作用。 In the browser it is showing that the link is directed to blog.html but doesn't go. 在浏览器中，显示该链接定向到blog.html，但没有链接。

PART 2 - On Blog.html 第2部分-在Blog.html上

On, blog.html , I have copied the .header-nav code from index.html - but when I click 'about' it should go to home page and scroll down to about div -it's not! 在blog.html ，我从index.html复制了.header-nav代码 -但是，当我单击“ about”时，它应该转到主页并向下滚动到about div-不是！ Even though the code is working In the index.html page. 即使代码在index.html页面中正常工作。 ANY ideas will be greatly appreciated! 任何想法将不胜感激！

Index.html Index.html

    <header class="main-header">
        <div class="header-container">
            <!-- logo wrapper -->
            <div class="logo-wrapper">

            <div id="logo-img-name">
                <picture>
                    <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg">
<!--                  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
 -->                  <img class="logo-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
                </picture>
                <p class="logo-name"><a href="index.html">Keeva</a></p>
                            <!--  BURGER NAV -->

            </div>


            </div>

        <a class="burger-nav"></a>  
        </div>  

            <ul class="header-nav">
                <li><a id="home" href="#home-View">Home</a></li>
                <li><a id="about" href="#about-View">About</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a id="contact" href="#contact-View">Contact</a></li>
            </ul>
    </header>

Blog.html Blog.html

    <header class="main-header">
        <div class="header-container">
            <!-- logo wrapper -->
            <div class="logo-wrapper">

            <div id="logo-img-name">
                <picture>
<!--                    <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg">
 --><!--                  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
 -->                  <img class="logo-img" src="img/desktop/images/logo.png" alt="Flowers" style="width:auto;">
                </picture>
                <p class="logo-name"><a href="index.html">Keeva</a></p>
                            <!--  BURGER NAV -->

            </div>


            </div>

        <a class="burger-nav"></a>  
        </div>  

            <ul class="header-nav">
                <li><a id="home" href="index.html">Home</a></li>
                <li><a id="about" href="#about-View">About</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a id="contact" href="#contact-View">Contact</a></li>
            </ul>
    </header>

JavaScript 的JavaScript

$(document).ready(function() {

    // add a click listener to each <a> tags
    setBindings();

    // burger nav
    $(".burger-nav").on("click", function() {
        $(".header-nav").toggleClass("open");   
    });

});

/* ONE PAGE NAVIGATION FUNCTION */
function setBindings() {
    $(".header-nav a").click(function(e) {
        // prevent anchor tags for working (?)
        e.preventDefault();
        var sectionID = e.currentTarget.id + "-View";

        $("html, body").animate({
            scrollTop: $("#" + sectionID).offset().top
        }, 1000)
    })
}

Full index.html 完整的index.html

    <!DOCTYPE html>
<html>
<head>
    <title>KEEVA APP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
    <!--  extra -->
 <link href="https://fonts.googleapis.com/css?family=Quicksand:700" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>



    <header class="main-header">
        <div class="header-container">
            <!-- logo wrapper -->
            <div class="logo-wrapper">

            <div id="logo-img-name">
                <picture>
                    <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg">
<!--                  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
 -->                  <img class="logo-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
                </picture>
                <p class="logo-name"><a href="index.html">Keeva</a></p>
                            <!--  BURGER NAV -->

            </div>


            </div>

        <a class="burger-nav"></a>  
        </div>  

            <ul class="header-nav">
                <li><a id="home" href="#home-View">Home</a></li>
                <li><a id="about" href="#about-View">About</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a id="contact" href="#contact-View">Contact</a></li>
            </ul>
    </header>
    <div class="main-content">
        <div id="home-View" class="sec-1">
        <div class="flex-desktop-sec-1">
            <div class="col-1">
                <h1>Introducing 'Keeva' world's smartest assistant.</h1>
                <h2>Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</h2> 
            </div>
            <div class="col-2">
            <!-- Download Buttons -->
                <div class="download-wrap">
                <!--  playstore icon -->
                    <picture>
                  <source media="(min-width: 320px)" srcset="img/mobile/mobile-playstore.png">
                              <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
                              <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
                </picture>
                <!--  appstore icon -->
                    <picture>
                  <source media="(min-width: 320px)" srcset="img/mobile/mobile-appstore.png">
                              <!-- <source media="(min-width: 465px)" srcset="img/tablet/tablet-hero-iphone.jpg"> -->
                              <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
                </picture>
                </div>  
                </div>
            </div>
                    <!-- iphone 1 image wrap -->
                <div class="hero-img">
                <!--  iphone image -->
                    <picture>
<!--                                        <source media="(min-width: 320px)" srcset="img/desktop/images/home_03.jpg">
 -->                        <img class="phone-img" src="img/desktop/images/home_03.jpg" alt="Flowers">
                    </picture>
                </div>

            </div>
        </div>
        <div class="sec-2">
            <h3>Say hi to Keeva.</h3>
            <h4>World’s most smartest personal assistant in your procket.</h4>

            <!-- ipad 1 image -->
            <picture id="sec-2-picure">
                <!-- <source media="(min-width: 320px)" srcset="img/mobile/mobile-ipad.jpg"> -->
                          <source media="(min-width: 320px)" srcset="img/desktop/images/home_07.jpg">
                <img class="phone-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:60%">
            </picture>          

        </div>
        <div class="sec-3">
                <!-- iphone image  -->
            <div class="sec-3-flex">
            <!-- Iphone 1 image -->
                <picture id="iphone-sec-3">
<!--                              <source media="(min-width: 320px)" srcset="img/desktop/images/home_11.jpg">
 -->                    <img  id="iphone-2-img" src="img/desktop/images/home_11.jpg" alt="Flowers">
                </picture>
                <div class="sales-copy-wrap">
                    <h3>Get organized with events, tasks and notes.</h3>
                    <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
                </div>              
            </div>

        </div>

        <div class="sec-4">
                <!-- iphone image  -->
            <div class="sales-copy-wrap">
                <h3>Collaborate easily with your team members.</h3>
                <p class="sales-copy">We understand communication is key to successful execution of your projects. Stay connected and updated.</p>
            </div>
            <div class="image-wrapper">
                <picture id="iphone-sec-4">
<!--                              <source media="(min-width: 320px)" srcset="img/desktop/images/home_14.jpg">
 -->                    <img id="iphone-3-img" src="img/desktop/images/home_14.jpg" alt="Flowers">
                </picture>              
            </div>
        </div>
        <div  id="about-View" class="bg-1-wrapper">
        <!-- Bg work banner -->
            <picture>
                <img  id="bg-work-img" src="img/desktop/home1.jpg" alt="Flowers" style="width:100%">
            </picture>                  
        </div>

        <div  class="sec-5">

            <h3 class="about-title"> MEET OUR TEAM </h3>

            <div class="about-us-section">

                <div class="about-wrapper">

                <div class="about-flex">
                    <picture>
                        <img class="founder-img" src="img/desktop/images/home_24.jpg" alt="Flowers">
                    </picture>              

                    <picture>
                        <img class="founder-img" src="img/desktop/images/home_24.jpg" alt="Flowers">
                    </picture>  
                </div>

                <div class="founder-names-wrap">
                    <h5> John M. </h5>

                    <h5> Tyson P. </h5>             
                </div>

            </div>  

                <div class="about-content">
                    <div class="section-para">
                        <p id="founder-headline">The Founders</p>           
                        <p class="sales-copy">In the summer of 2012 Mike and Tyson developed the initial concept of Keeva. After researching the market for a solution to their problem they decided to design and build the product from scratch. </p> </br>
                    </div>
                    <div class="section-para"> 
                        <p id="founder-headline"> Our Mission </p>
                        <p class="sales-copy">Keeva’s objective is to revolutionize the digital market by enabling young professionals to optmize their work-life.</p>              
                    </div>
                </div>

            </div>          
        </div>
 <!--  footer  -->
<footer>
     <div class="box green">
                <div class="about-footer">
                <h3 class="about-us-title">ABOUT US</h3>
                <article class="about-article">
                    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Contrary to popular belief, Lorem Ipsum is not simp. Contrary to popular belief, Lorem Ipsum is not simp
                </article>           
            </div>

  </div>
  <div class="box red">
                <div class="social-footer">
                <h3 class="connect-us-title">Connect With Us</h3>
                <div class="social-flex">
                    <img class="social-icon" src="img/desktop/images/twitter.jpg">                   
                    <img class="social-icon" src="img/desktop/images/insta.jpg">                     
                    <img class="social-icon" src="img/desktop/images/fb.jpg">

                </div>  
                            <p id="footer-copyright-text"> KEEVA INC © 2017 | Designed by Radian3 </p>

            </div>
  </div>
  <div class="box orange">
     <div class="location-footer">
                                <h3 class="contact-us-title"> Our Location</h3>
                <div class="location-content-wrap">
                    <div class="location-image-wrap">
                        <img class="maps-icon" src="img/desktop/images/home_31.jpg">
                    </div>
                    <div class="address-footer">
                        <img class="location-icon" src="img/desktop/images/home_35.jpg">
                        <p> 25/153 Queens St, Avenue, Brisbane, QLD, 4000</p>                       
                        <p> Email: support@keeva.com</p>                        
                    </div>          
                </div>           
            </div>
  </div>

        </footer>


        <!--  JQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Script -->
    <script type="text/javascript" src="js/script.js"></script>
 </body>
</html>

Answer 1

Your javascript - specifically here: 您的JavaScript-特别是在这里：

    // prevent anchor tags for working (?)
    e.preventDefault();

Is preventing the page changing. 正在阻止页面更改。 This looks like you are adapting a "one page" website. 看起来您正在改编“一页”网站。

Change that section to: 将该部分更改为：

$(".header-nav a.scrollLink").click(function(e) {
    // prevent anchor tags for working (?)
    e.preventDefault();
    var sectionID = e.currentTarget.id + "-View";
    $("html, body").animate({
        scrollTop: $("#" + sectionID).offset().top
    }, 1000)
})

...and put the calss scrollLink on the links you DO want to smooth scroll down the page ...并将calss scrollLink放在您要平滑向下滚动页面的链接上

导航锚标记不起作用，但是为什么呢？

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-07-22 07:29:46

导航锚标记不起作用，但是为什么呢？

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-22 07:29:46

解决方案1
1 已采纳 2017-07-22 07:29:46