Как сделать плавную прокрутку к якорям с помощью vuejs

Question

Мне необходимо сделать плавную прокрутку к элементам. Все что находилось мною в сети, либо не работало, либо моментально переносило к элементу.

<template>
    <div>
        <a href="#">Ссылка к первому элементу</a>
        <a href="#">Ссылка к второму элементу</a>
        <a href="#">Ссылка к третьему элементу</a>

        <div>1 элемент</div>
        <div>2 элемент</div>
        <div>3 элемент</div>
    </div>
</template>
<script>

</script>

Answer 1

Вот пример с помощью css свойства scroll-behavior

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.links>a{
  color: black;
  
  display: inline-block;
  margin: 10px;
  text-decoration: none;
}

.links>a:hover{
  text-decoration: underline;
}

.elements{
  width: 100%;
}

.elements>div{
  height: 75vh;
  
  text-align: center;
  line-height: 75vh;
}

<div class="links">
  <a href="#elem1">First elem</a>
  <a href="#elem2">SecondElem</a>
  <a href="#elem3">Third elem</a>
</div>

<div class="elements">
  <div id="elem1">First element</div>
  <div id="elem2">Second element</div>
  <div id="elem3">Third element</div>
</div>

БЛОГ НА HUSL

Как сделать плавную прокрутку к якорям с помощью vuejs

Ответы (1 шт):