导航到div而不更改url

Question

我正在构建一个单页Web应用程序，在单击链接到同一页面中div的锚标记时，不需要更改URL。 div ID被添加到网址中。 请在不更改网址的情况下帮助您导航到div。

到目前为止，这是我的代码：

 $(document).ready(function () { $('a').on("click",function(e){ window.location="#link5" e.preventDefault(); e.stopPropagation(); console.log(window.location); }); }) 

 #login { position: absolute; top: 50%; left: 50%; } a { text-decoration: none; display: inline-block; padding-right: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> <a href="#">Link4</a> <a href="#">Link5</a> <h4>Content of the above links</h4> <div id="link1"> <h3>Contents of #link1</h3> <p>Sample contents placed in the div #link1</p> <p>Sample contents placed in the div #link1</p> <p>Sample contents placed in the div #link1</p> </div> <div id="link2"> <h3>Contents of #link2</h3> <p>Sample contents placed in the div #link2</p> <p>Sample contents placed in the div #link2</p> <p>Sample contents placed in the div #link2</p> </div> <div id="link3"> <h3>Contents of #link3</h3> <p>Sample contents placed in the div #link3</p> <p>Sample contents placed in the div #link3</p> <p>Sample contents placed in the div #link3</p> </div> <div id="link4"> <h3>Contents of #link4</h3> <p>Sample contents placed in the div #link4</p> <p>Sample contents placed in the div #link4</p> <p>Sample contents placed in the div #link4</p> <p>Sample contents placed in the div #link4</p> </div> <div id="link5"> <h3>Contents of #link5</h3> <p>Sample contents placed in the div #link5</p> <p>Sample contents placed in the div #link5</p> <p>Sample contents placed in the div #link5</p> <p>Sample contents placed in the div #link5</p> </div> 

http://jsfiddle.net/vkarthikcse/3duv3ozz/3/

Answer 1

$ http://jsfiddle.net/xovd9c8t/2/

动画，使用现代数据元素

这将使您在导航到页面的那部分时平稳过渡。 用户体验将是惊人的。

Answer 2

这应该工作： http : //jsfiddle.net/3duv3ozz/4/

当然，现在仅使用一个链接很难进行编码，但是您应该了解一下：

$(document).ready(function () {
    $('a').on("click",function(e){

        var posTop = $("#link5").offset().top; //Get the position of the element you want to scroll to
        e.preventDefault();
        e.stopPropagation();
        $('html, body').scrollTop(posTop); //Scroll to that position
        console.log(window.location);

    });
})