Как убрать #lorem из URL

#javascript #html #jquery #css

Проблема в следующем. На сайте реализованы плавные якорные ссылки через https://github.com/cferdinandi/smooth-scroll
Я дилетант в джаваскрипте и jQuery, поэтому не могли бы вы, пожалуйста, подсказать,
каким образом можно реализовать это не через hash или как убрать "#"?
    

Ответы

Ответ 1

Сделал минималистический пример на jQuery. В ссылку через # записывается id блока,
к которому нужно перейти, однако в URL хеши не добавляются. Работает для любой ссылки
на странице, в которой указан id блока для перехода.



// Page a Link Smooth Scrolling
$("[href^='#']").click(function() {
var idtop = $($(this).attr("href")).offset().top;
$('html,body').animate(
    // Time animation
    {scrollTop: idtop}, 500);
return false;
});




скролл к следующему блоку


скролл к предыдущему блоку



Ответ 2

Этот плагин специально построен таким образом, чтобы обрабатывать переход по кликам
сохраняя их в историю. Если вам нужен просто плавный переход, может проще сделать его
самому? Вот пример кода, он очень простой:

$('body').on('click', '.smooth-scroll-class', function(){

     //по href ищем элемент с нужным id и определяем его позицию
     pos = $( $(this).attr('href') ).offset();

     if (pos) {
        //скролим на эту позицию
        $("html, body").animate({scrollTop: pos.top}, 600);

        //отключаем стандартный переход по ссылке
        return false; 
     }
})


Так можно сделать ссылку не на   a на <.. id='hashlink'> Те не
надо создавать якоря, достаточно прописать id нужному элементу.

Можно так-же и искать якорь

$('body').on('click', '.smooth-scroll-class', function(){

     //по href ищем якорь с нужным именем
      pos = $('a[name=' + $(this).attr('href').replace(/^#/,'') + ']').offset();
     if (pos) {
         //скролим на эту позицию
         $("html, body").animate({scrollTop: pos.top}, 600);

         //отключаем стандартный переход по ссылке
         return false; 
     }

})


Живой тест:



    $('body').on('click', '.smooth-scroll', function() {

      pos = $('a[name=' + $(this).attr('href').replace(/^#/,'') + ']').offset();
      if (pos) {
        $("html, body").animate({
          scrollTop: pos.top
        }, 600);

        return false;
      }
    })

скролл вниз