плавный переход по якорным ссылкам и выравнивание по центру

178

24 декабря 2018, 18:50

у меня на странице есть переход по якорям, реализован так:

<script type="text/javascript"> 
 $(document).ready(function(){ 
    $("#menu").on("click","a", function (event) { 
        event.preventDefault(); 
        var id  = $(this).attr('href'), 
            top = $(id).offset().top; 
        $('body,html').animate({scrollTop: top}, 1500); 
    }); 
}); 
</script>

<nav id="menu"> 
    <ul> 
        <li><a href="#yak1">Ссылка на якорь 1</a></li> 
        <li><a href="#yak2">Ссылка на якорь 2</a></li> 
        <li><a href="#yak3">Ссылка на якорь 3</a></li> 
        <li><a href="#yak4">Ссылка на якорь 4</a></li> 
    </ul> 
</nav>

Все работает, но моя страница очень широкая (3000 px) . Как сделать так чтобы например переход был не только вниз, но и влево и вправо, или чтобы переход выравнивался по центру элемента?

Вообщем был дополнительный вопрос, но модератор его удалил, типо нельзя писать в ответах вопрос. Скрипт который в первом ответе у меня работает так: Сначало переходит резко влево а потом уже плавно вниз. По диагонале не как не хочет идти. Из за чего это может быть?

Answer 1

Короче как-то так :D
Если будет не понятно, пишите, распишу подробнее)

$('a').on('click',function(){ 
  var a = $(this).attr('href'), 
      winWidth = $(window).width(), 
      winHeight = $(window).height(), 
      blockWidth = $(a).width(), 
      blockHeight = $(a).height(), 
      posBlock = $(a).offset(); 
 
      $('body,html').animate({ 
        scrollTop: (posBlock.top - ((winHeight/2) - (blockWidth/2))), 
        scrollLeft: (posBlock.left - ((winWidth/2) - (blockHeight/2))) 
      }, 1500); 
});

.big_block { 
  width: 4000px; 
  height: 4000px; 
  position: relative; 
  background: #ddd; 
} 
 
.small_block { 
  width: 100px; 
  height: 100px; 
  background: red; 
  position: absolute; 
} 
 
.small_block[data-num="1"] { 
  top: calc(500px - 50px); 
  left: calc(500px - 50px); 
} 
 
.small_block[data-num="2"] { 
  top: calc(1000px - 50px); 
  left: calc(1000px - 50px); 
} 
 
.small_block[data-num="3"] { 
  top: calc(1500px - 50px); 
  left: calc(1500px - 50px); 
} 
 
.small_block[data-num="4"] { 
  top: calc(2000px - 50px); 
  left: calc(2000px - 50px); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href="#yak1">Go small block 1</a> 
<a href="#yak2">Go small block 2</a> 
<a href="#yak3">Go small block 3</a> 
<a href="#yak4">Go small block 4</a> 
 
<div class="big_block"> 
  <div id="yak1" class="small_block" data-num="1"></div> 
  <div id="yak2" class="small_block" data-num="2"></div> 
  <div id="yak3" class="small_block" data-num="3"></div> 
  <div id="yak4" class="small_block" data-num="4"></div> 
</div>