リロード時にページを一番上に移動させない

Question

私は粘着性メニューバーを持つウェブサイトを設計しています。私は、ページをコンテンツエリアに貼り付けようとしているときに、読み込まれたり、メニューバーのどこかをクリックしたりして頂点にジャンプし続けます。

Answer 1

私は皮膚この猫が、リンクにはいくつかの方法があります確信しているの一部にユーザーをスクロールするようにあなたのリンク内のアンカー（＃）とIDを使用して

ページ要素IDを使用すると、ユーザーをどこに戻すのに役立ちますか？

$(document).ready(function() { 
 
    var stickyNavTop = $('.nav').offset().top; 
 

 
    var stickyNav = function() { 
 
    var scrollTop = $(window).scrollTop(); 
 

 
    if (scrollTop > stickyNavTop) { 
 
     $('.nav').addClass('sticky'); 
 
    } else { 
 
     $('.nav').removeClass('sticky'); 
 
    } 
 
    }; 
 

 
    stickyNav(); 
 

 
    $(window).scroll(function() { 
 
    stickyNav(); 
 
    }); 
 
});

.sticky { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 100; 
 
    border-top: 0; 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="header"> 
 
    Header 
 
    </div> 
 
    <div class="nav"> 
 
    <a href="#lastParagraph">Bottom Paragraph</a> 
 
    <a href="#nearTop">Near Top</a> 
 
    <a href="http://mysitesomewhere.com/index.html#idNearTheBottom">somewhere else</a> 
 
    </div> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 
    
 
     <p id="nearTop">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 

 
    <p id="lastParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante 
 
     urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur 
 
     mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p> 
 
    </div> 
 
</div>

Answer 2

いくつかのヒントは、次のようになります。

• は、単一ページのアプリケーションを実行して、ページをリロード回避

（ジャバスクリプトで、基本的には、新しいコンテンツを取得し、リロードせずにページに挿入します）

• いくつかのjavascriptを使用して、ユーザーがページ上のどこにいるかを把握し、その情報（y位置）をメニューバーのリンクに配置します。次に、ロード時に別のJSスクリプトがその情報を取得してスクロールします。しかし、それはちょっと汚いです。ブラウザが自動的にページ