Плавный скроллинг к якорю со слешем

177

12 декабря 2018, 01:50

У меня возникла следующая проблема: не могу настроить плавный скроллинг к якорю со слешем. У меня сайт состоит из двух страниц, три пункта меню находятся на одной странице, один пункт меню переводит на вторую. Слеш в данном случае нужен для того, чтобы я мог свободно перемещаться между страницами (всего их две), в особенности со второй на первою - без слеша это сделать не получается. Я написал следующий код, но он не срабатывает - в консоли тоже ничего не выдает:

$('a[href^="#"]').click(function () {
        elementClick = $(this).attr("href");
        elementClick = elementClick.substr(1);
        destination = jQuery(elementClick.split("/")[1]).offset().top;
        if($.browser.safari){
            $('body').animate( { scrollTop: destination }, 1100 );
        }else{
            $('html').animate( { scrollTop: destination }, 1100 );
        }
    return false;
    });

Реально ли вообще осуществить такое, или я просто трачу время? Заранее спасибо за ответы!

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
  <ul class="navbar-nav"> 
    <li class="nav-item"> 
      <a class="go_to" href="/#about-us">ABOUT US</a> 
    </li> 
    <li class="nav-item"> 
      <a class="go_to" href="/#about-course">COURSE</a> 
    </li> 
    <li class="nav-item"> 
      <a class="go_to" href="/#buy-a_course">BUY A COURSE</a> 
    </li> 
  </ul> 
</nav> 
<div class="about-us" id="about-us"> 
  blah blah blah 
</div> 
<div class="about-us" id="about-course"> 
  blah blah blah 
</div> 
<div class="about-us" id="buy-a_course"> 
  blah blah blah 
</div>

Answer 1

Тебе нужно отменить событие по умолчанию.

$('a[href^="#"]').click(function (e) {
    e.preventDefault()
    elementClick = $(this).attr("href");
    elementClick = elementClick.substr(1);
    destination = jQuery(elementClick.split("/")[1]).offset().top;
    if($.browser.safari){
        $('body').animate( { scrollTop: destination }, 1100 );
    }else{
        $('html').animate( { scrollTop: destination }, 1100 );
    }
return false;
});