Как сделать эффект слайда при использовании тега - PullRequest
Новая
       75

Как сделать эффект слайда при использовании тега

0 голосов
/ 23 февраля 2020

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

Код (я только показал важную часть): 

<!DOCTYPE html>
<html>
  <head>
    <title>Internet - Part 3<title>
  </head>
  <body>
    <div id='header'>
      <a href='#section'>Section</a>
    </div>
    <div id='section'>

      Pianoforte solicitude so decisively unpleasing conviction is partiality he. Or particular so 
      diminution entreaties oh do. Real he me fond show gave shot plan. Mirth blush linen small hoped way 
      its along. Resolution frequently apartments off all discretion devonshire. Saw sir fat spirit 
      seeing valley. He looked or valley lively. If learn woody spoil of taken he cause. 

    </div>
  </body>
</head>

Ответы [ 2 ]

1 голос
/ 23 февраля 2020

Без jQuery: 

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Подробнее здесь .

0 голосов
/ 23 февраля 2020

Попробуйте: 

 $('#header > a').click(function(event){
    event.preventDefault();
    var id = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(id).offset().top;
    }, 600);
 })
...