В основном, когда я нажимаю ссылку на моей домашней странице, я хочу использовать некоторый JavaScript для перехода в новый div и изменить URL-адрес, чтобы, если бы URL-адрес был напечатан, он привел бы правильную информацию. Я не хочу, чтобы вся страница загружалась при щелчке ссылки. Во время серфинга по ссылке на ссылку я хочу анимировать изменение веб-страниц, вместо этого загружая новую страницу.
Существует три способа достижения этого:
Использование обычного JavaScript в ваших якорях (ОПРЕДЕЛЕННО НЕ РЕКОМЕНДУЕТСЯ)
Делая это, я имею в виду буквально:
<a href="javascript:goToHome()">Home page</a>
Вы можете это сделать, но это означает, что вы будете загрязнять глобальную область глобальными переменными и функциями, что строго не рекомендуется.
Использование "#" во всех ваших якорях Это самый распространенный и безопасный способ сделать это, поскольку он доступен практически во всех основных браузерах и их разных версиях
<a href="#/home/">Home page</a>
Цель хэша состоит в том, чтобы передать вас непосредственно в раздел в документе, который вы сейчас читаете, этот раздел определяется атрибутом id
в HTML, это предназначалось для очень больших HTML-документов. С хешем и событием window.onhashchange
вы можете получить то, что хотите, за исключением некоторых старых версий IE, которые, я думаю, составляют 7 и ниже.
window.addEventListener('hashchange', function(event) {
//your navigation logic here
});
Подробнее о hashchange
: событие onhashchange
Использование API window.history
Это самый новый способ его достижения, поскольку он совсем не поддерживается всеми браузерами, но это хороший способ сделать это:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Где:
stateObj: объект, который может быть передан между состояниями истории.
title: Просто заголовок для нового состояния.
url: новый URL-адрес, который будет отображаться в адресной строке.
Этот вызов функции вызывает событие window.onpopstate
в браузере.
Подробнее о API истории: API истории HTML5
Надеюсь, это может вам помочь.
Вы можете посмотреть на ember.js. Это структура, которая делает именно то, о чем вы спрашиваете (если я правильно вас понял), и она обрабатывает всю историю для вас. Там есть полезный учебник по кодовой школе, который поможет вам подойти к созданию простого загрузочного сайта по адресу: https://www.codeschool.com/courses/warming-up-with-emberjs
Вы можете сделать это:
window.location.hash = "id of the element to be scrolled to";
Вы можете использовать этот код, который я взял из css-трюков
$(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;
}
}
});
});
Вышеуказанное автоматически выполнит вашу работу.
Если вы хотите работать со "старыми" браузерами, то 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
Там больше информации в этой теме: Как изменить URL-адрес страницы, не обновляя страницу?