爲頁面轉換創建鏈接

Question

我在寫單頁網站。它有3個「幻燈片」，如About/Music/Contact。通過下拉菜單可以訪問這些幻燈片。當您單擊菜單中的鏈接時，當前的頁面包裝將變爲visibility: hidden，並通過動畫顯示以下內容。這很有效，但所有事情都發生在根頁面上，而不更改URL，這不便於用戶使用，因爲如果要共享指向頁面的鏈接，您將始終將其重定向到根目錄。

所以問題是：「如何在不點擊重新加載頁面的情況下更改URL（可能是通過散列或者不適用）？」。提前致謝。

P.S.沒有代碼需要，只需給我你的方式來做到這一點，我將它添加到代碼中。

Answer 1

這個只是檢查，並採取它，如果你想要這個

function isElementInViewport (el) { 
 
     //special bonus for those using jQuery 
 
     if (typeof jQuery === "function" && el instanceof jQuery) { 
 
     el = el[0]; 
 
     } 
 
     var rect = el.getBoundingClientRect(); 
 
     return (
 
     rect.top >= 0 && 
 
     rect.left >= 0 && 
 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
 
    ); 
 
    } 
 

 

 
    // click-to-scroll behavior 
 
    $("a").click(function (e) { 
 
     e.preventDefault(); 
 
     var section = this.href; 
 
     var sectionClean = section.substring(section.indexOf("#")); 
 
     $("html, body").animate({ 
 
     scrollTop: $(sectionClean).offset().top 
 
     }, 1000, function() { 
 
     window.location.hash = sectionClean; 
 
     }); 
 
    }); 
 
    
 
    // listen for the scroll event 
 
    $(document).on("scroll", function() { 
 
     //console.log("onscroll event fired..."); 
 
     // check if the anchor elements are visible 
 
     $(".common").each(function (idx, el) { 
 
     if (isElementInViewport(el)) { 
 
      // update the URL hash 
 
      if (window.history.pushState) { 
 
      var urlHash = "#" + $(el).attr("id"); 
 
      window.history.pushState(null, null, urlHash); 
 
      } 
 
     } 
 
     }); 
 
    });

body { 
 
    float: left; 
 
    width: 100%; 
 
    padding-bottom: 0px; 
 
    
 
} 
 
.common { 
 
\t width: 100%; 
 
\t float: left; 
 
\t height: 100vh; 
 
\t display: table; 
 
} 
 
.allbody { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 

 
a { 
 
\t display: inline-block; 
 
\t padding: 15px; 
 
} 
 
header { 
 
\t float: left; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t background: #fff; 
 
} 
 
.common h2 { 
 
\t font-size: 30px; 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t padding-top: 10%; 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
} 
 
#firstDestination { 
 
\t background: #000; 
 
} 
 
#secondDestination { 
 
\t background: #999; 
 
} 
 
#thirdDestination { 
 
\t background: #ccc; 
 
} 
 
#fourthDestination { 
 
\t background: #c1c1c1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<header> 
 
\t <a href="#firstDestination">first page</a> 
 
\t <a href="#secondDestination" >second page</a> 
 
\t <a href="#thirdDestination">third page</a> 
 
\t <a href="#fourthDestination">fourth page</a> 
 
</header> 
 

 

 
<div class="allbody"> 
 
\t <div class="common" id="firstDestination" ><h2>First Page</h2></div> 
 
\t <div class="common" id="secondDestination"><h2>Second Page</h2></div> 
 
\t <div class="common" id="thirdDestination" ><h2>Third Page</h2></div> 
 
\t <div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div> 
 

 
</div>