Question

基本上，当我点击主页上的链接时，我想使用一些JavaScript在新的div中滑动并更改网址，这样如果输入了网址，它就会带来正确的信息。我不想在点击链接时加载整个页面。在从链接到链接的冲浪过程中，我希望动画网页更改而不是加载新页面。

Answer 1

有三种方法可以实现这一目标：

在您的主播中使用纯JavaScript（绝对不推荐）
通过这样做我的意思是字面意思：

<a href="javascript:goToHome()">Home page</a>

您可以这样做，但这意味着您将使用全局变量和函数来污染全局范围，严格不建议这样做。

在所有锚点中使用“＃” 这是最常见和最安全的方法，因为几乎所有主流浏览器及其不同版本都可以使用

<a href="#/home/">Home page</a>

哈希的目的是将您直接带到您当前正在阅读的文档中的某个部分，该部分由HTML中的id属性定义，这适用于非常大的HTML文档。使用哈希和window.onhashchange事件，你可以得到你想要的东西，除了一些旧版本的 IE 我认为 7 及以下。

window.addEventListener('hashchange', function(event) {
    //your navigation logic here
});

有关hashchange的更多信息：onhashchange event

使用window.history API 这是实现它的最新方式，因为它并不是所有浏览器都支持它，但它是一种很好的方法：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

其中：
stateObj ：是一个可以在历史状态之间传递的对象标题：只是新州的标题 url ：要在地址栏中显示的新网址此函数调用将触发浏览器上的window.onpopstate事件。

有关历史记录API的更多信息：HTML5 History API

希望这可以帮到你。

Answer 2

你可以这样做：

window.location.hash = "id of the element to be scrolled to";

您可以使用我从css-tricks

获取的代码

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

以上将自动为您完成工作。

Demo

Answer 3

如果您想与＆＃34; old＆＃34;浏览器然后window.location.hash是你唯一的选择，它不能操纵整个URL，只能操作#about到最后。

如果您愿意放弃旧版浏览器，那么您可以按照此处所述进入window.history.pushState：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

以下是浏览器与pushState的兼容性概述：http://caniuse.com/#search=pushstate

此主题中有更多信息：How can I change the page URL without refreshing the page?

Answer 4

你可能想看看ember.js。这是一个完全符合您要求的框架（如果我理解正确的话），它会为您处理所有历史记录。有一个关于代码学校的有用教程可以帮助您构建一个简单的引导站点：https://www.codeschool.com/courses/warming-up-with-emberjs

如何在不重新加载浏览器的情况下更改我的Url？

4 个答案: