導航錨點標記不起作用，但爲什麼？

所以我有一個兩頁的網站。主頁具有單頁導航，即當'約'被點擊時，它被向下滾動到'約'div。導航錨點標記不起作用，但爲什麼？

第1部分 - 在index.html的

但是點擊 '博客' 的導航項目時，它應該去 blog.html。在.header-nav我有以下<li><a href="blog.html">Blog</a></li>，但不起作用。在瀏覽器中，它顯示鏈接指向blog.html，但不去。

PART 2 - Blog.html

上，blog.html，我從index.html的複製.header-nav代碼 - 但是當我點擊 '關於' 它應該去主頁並向下滾動到關於div-it的不是！ 即使代碼正在工作在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

<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

$(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) 
    }) 
}

完整的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: [email protected]</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>

來源

2017-07-22 Shaz

您的JavaScript - 在這裏具體：

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

是防止換頁。這看起來像是在改編一個「單頁」網站。

更改該條：

$(".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) 
})

...並把CALSS scrollLink上你要平滑向下滾動頁面

來源

2017-07-22 07:29:46 mayersdesign

是，可以完美的鏈接。但第2部分的問題仍然存在 - 在blog.html上，當我點擊關於頁面時，它應該轉到index.html然後＃關於View div。有任何想法嗎？ – Shaz

您需要將鏈接更改爲：About - 這指示瀏覽器轉到index.html頁面然後轉到about-View ID – mayersdesign

是的，我在@mayersdesign上試過它指向正確的路徑，但沒有當我點擊時去。 – Shaz

導航錨點標記不起作用，但爲什麼？

回答

相關問題