Удалить hash id из url

У меня есть заголовок меню, и когда вы щелкаете по одной из ссылок меню, он направляет другую страницу на полпути вниз (что мне нужно), поскольку находит соответствующее имя идентификатора div. Мне было интересно, есть ли способ очистить URL-адрес обратно, так что он не включает #id в моем URL-адресе? Пробовал хеш window.location, и это отрывает его от прокрутки и оставляет # в URL-адресе. Вот что у меня есть:Удалить hash id из url

В моем меню: <li><a href="about#scroll-to" ....

А на о странице, она прокручивается вниз к DIV называется # свитка-к .. <div id="scroll-to"></div>

Любые предложения будут велики. Благодаря!

источник

2013-05-20 user2212564

Это, вероятно, больше проблем, чем это стоит, но вы, вероятно, могли бы установить это с помощью [History.js] (http://balupton.github.io/ history.js/демо /). – bdesham

Используя jquery, вы можете сделать запрос POST на целевую страницу, когда нажимается меню.

Данные POST будут содержать идентификатор div, в который вы хотите перейти.

На целевой странице используйте язык сервера (php, asp) для вывода этого идентификатора в переменной js и на слайде с готовым документом, используя jquery для этого идентификатора.

Тогда у вас будет чистый URL-адрес, а страница прокручивается в ваш div.

---- Редактировать: вот идет код!

Позволяет использовать jquery, чтобы сделать POST на целевую страницу, когда нажата кнопка меню. Мы добавим класс, скажем, «mymenuitem». Мы добавим этот класс в нашу ссылку в меню. Таким образом, мы будем иметь

<li><a href="YOURTARGETPAGE.HTML#scroll-to" onClick="javascript:return false;" class="mymenuitem">Information about us</a></li>

(OnClick останавливает ссылку перенаправлять вручную) и пустая форма (поместить его после < тела>)

<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>

тогда мы создадим необходимое JQuery поэтому, когда тег < a> с классом «mymenuitem», мы отправим POST на целевую страницу.

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $(".mymenuitem").click(function() { 

    // we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to" 
    var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1]; 

    // lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id) 

    $("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">'); 
    $("#slidinganchorform").submit(); 
    }); 
}); 
</script>

то в нашем YOURTARGETPAGE.HTML мы будем иметь что-то вроде (давайте предположим, что мы используем PHP)

<head> 

<!-- make sure your jquery is loaded ;) --> 

<?php 
if($_POST['anchorid']!='') 
{ 
?> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    // lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>) 
    var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top; 
    // Lets scroll 
    jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow'); 
}); 
</script> 
<?php 
} 
?> 
</head>

быть уверены, что правильный идентификатор должен существовать;)

<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>

(удалить ваш старый код, потому что я изменил некоторые имена переменных, и будет сложно отладить, если есть части из предыдущей версии. Пишите все с самого начала)

источник

2013-05-20 12:56:48 Sharky

Я добавил код, проверьте его – Sharky

Хейя, у меня был отрывок вашего фрагмента, и вот что происходит ...Он работает и прокручивает медленнее до идентификатора ТОЛЬКО, если im на целевой странице, а затем снова щелкните ссылку (чтобы мы знали, что функция работает), но если im не на целевой странице и нажмите «целевая ссылка», то # прокрутка - все еще отображается в URL-адресе и переходит к идентификатору. Странно, как я проверял, чтобы убедиться, и мы видим, что он работает только на целевой странице. Есть ли у вас какие-либо предложения о том, что может быть проблемой? Я также предупредил переменную и так далее, и все кажется прекрасным :) – user2212564

@ user2212564, пожалуйста, еще раз просмотрите код с самого начала. я изменил его, и он работает сейчас. по-видимому, предыдущая версия jquery non-ajax posting не работала. Это должно работать :) – Sharky

Вы можете сделать это, когда загружается новая страница

history.pushState("", document.title, window.location.pathname);

Однако он также удалит строку запроса. Хотя, вы могли бы сыграть с ним немного, чтобы сохранить его

источник

2013-05-23 16:52:28

Удалить hash id из url

ответ

Смежные вопросы