Как сделать, чтобы при переходе по ссылке открывалось определенное положение страницы?

Question

Александр Лебедь @saturnuranus

Как сделать, чтобы при переходе по ссылке открывалось определенное положение страницы?

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

Вопрос задан более трёх лет назад
11047 просмотров

6 комментариев

Подписаться 3 Оценить 6 комментариев

Александр Лебедь @saturnuranus Автор вопроса

В принципе я как понял то вот так?

<a class="scroll" href="post.html#block">Block</a>

<div id="block">Тут что-то</div>

$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1000,'swing');
});

Правильно ли это? И если да, то как сделать чтоб не добавлялся этот якорь #block в строке браузера?

Или этот правильнее?

$(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;
      }
    }
  });
});

Но снова же вопрос как убрать чтоб якорь в строке не отображался?

Написано более трёх лет назад

Михаил Тихонин @phpclimber

Если Вы хотите, чтобы при клике по ссылкам не происходило переходов, а просто скроллировалась текущая страница, то вам в href можно ничего не писать, а просто на обработчик клика по ссылке повесить функцию скроллирования. Тогда URL в адресной строке меняться не будет.

Написано более трёх лет назад
Александр Лебедь @saturnuranus Автор вопроса

Михаил Тихонин: Не мне нужно сделать так чтоб именно при переходе по ссылки на другую страницу, скролилась именно она, но без добавления якоря в строку, возможно такое ?

Написано более трёх лет назад
Михаил Тихонин @phpclimber

Александр Лебедь: Возможно, но Вам же надо как-то передать информацию куда именно скролить? Якорь Вы использовать почему-то не хотите, значит можно использовать параметр GET, т е переменную, идущую в URL после '?'. На целевой странице можно распарсить location.search, получить значение нужной вам переменной и после этого скролить.
Хотя я бы лучше якорь использовал.

Написано более трёх лет назад
Александр Лебедь @saturnuranus Автор вопроса

Михаил Тихонин: Я понял, еще вопрос, влияют как-то на индексацию якоря или нет?

Написано более трёх лет назад
Михаил Тихонин @phpclimber

Александр Лебедь: Моё мнение - не должны влиять, но это лучше у спецов по SEO спросить.

Написано более трёх лет назад

В принципе я как понял то вот так?

<a class="scroll" href="post.html#block">Block</a>

<div id="block">Тут что-то</div>

$(".scroll").click(function(event){ event.preventDefault(); //calculate destination place var dest=0; if($(this.hash).offset().top > $(document).height()-$(window).height()){ dest=$(document).height()-$(window).height(); }else{ dest=$(this.hash).offset().top; } //go to destination $('html,body').animate({scrollTop:dest}, 1000,'swing'); });

Правильно ли это? И если да, то как сделать чтоб не добавлялся этот якорь #block в строке браузера?

Или этот правильнее?
$(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; } } }); });

Но снова же вопрос как убрать чтоб якорь в строке не отображался?
Если Вы хотите, чтобы при клике по ссылкам не происходило переходов, а просто скроллировалась текущая страница, то вам в href можно ничего не писать, а просто на обработчик клика по ссылке повесить функцию скроллирования. Тогда URL в адресной строке меняться не будет.
Михаил Тихонин: Не мне нужно сделать так чтоб именно при переходе по ссылки на другую страницу, скролилась именно она, но без добавления якоря в строку, возможно такое ?
Александр Лебедь: Возможно, но Вам же надо как-то передать информацию куда именно скролить? Якорь Вы использовать почему-то не хотите, значит можно использовать параметр GET, т е переменную, идущую в URL после '?'. На целевой странице можно распарсить location.search, получить значение нужной вам переменной и после этого скролить.
Хотя я бы лучше якорь использовал.
Михаил Тихонин: Я понял, еще вопрос, влияют как-то на индексацию якоря или нет?
Александр Лебедь: Моё мнение - не должны влиять, но это лучше у спецов по SEO спросить.

Answer 1 · 2015-04-16 16:21:54

можно:
- использовать native механизмы якорей
- использовать якори для передачи координат или селектора на страницу с последующим разбором скриптом и прокруткой
- кукистные костыли

выберем второй:
Скрипт может парсить переменный x/y или scrollTo=selector и прокручивает страницу

также позволяет делать тоже самое в пределах одной страницы, и как бонус парсит переменные с hash

<a href="#x=123&y=100">Scroll to  x/y</a>
     <a href="#scrollTo=#scrollID">ScrollTo element selector (id)</a>
     <a href="#scrollTo=.class">ScrollTo element selector (class)</a>
    <a href="path/to/page.php#scrollTo=.class">ScrollTo element selector (class)</a>

function decodeScrollPos(hide) {
             var params = {}, el, loc = window.location, hash = loc.hash.substr(1);

             hide && (loc.hash = "");

             hash.split('&').forEach(function (raw) {
                 var data = raw.split('=');
                 data[0] && (params[data[0]] = data[1] || "");
             })
             setTimeout(function () {
                 if (params.x || params.y) {
                     console.log('scroll=', hash);
                     window.scrollTo(params.x, params.y);
                 } else if (params.scrollTo) {
                     (el = document.querySelector(params.scrollTo)) && el.scrollIntoView && el.scrollIntoView(true);
                 }
             }, 100);
             return params;
         }


         window.onhashchange = function () {
             decodeScrollPos(true);
         }

         console.log(decodeScrollPos(true));

Если хотите не показывать hash в адресе после перехода после скроллинга можно его обнулить ..но зачем
window.location.hash="";

Как сделать, чтобы при переходе по ссылке открывалось определенное положение страницы?

Войдите на сайт