ページ遷移のリンクを作成する

Question

私は1ページのウェブサイトを作成しています。 About/Music/Contactのような3つのスライドがあります。これらのスライドへのアクセスはドロップダウンメニューで作成されます。メニューのリンクをクリックすると、現在のページラッパーは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>