Блог

Главная - Вопросы по программированию - Html-код для прокрутки раздела веб-страницы при нажатии кнопки

Html-код для прокрутки раздела веб-страницы при нажатии кнопки

#html #css #scroll #elementor

Вопрос:

Хорошо, у меня нет опыта программирования, но в настоящее время я работаю в Elementor, инструменте для создания веб-сайтов, и на моем сайте у меня есть Html-тег, который создает кнопку с именем Южная Америка:

 <button onclick="myFunction_sa()">
  South America
</button>

Существует также еще один Html-тег, содержащий скрипт. Этот скрипт открывает раздел «сэм-сек» при нажатии кнопки «Южная Америка». Сценарий гласит:

 <script>
function myFunction_sa() {
  var x = document.getElementById("sam-sec");
  if (x.style.display === "block") {
    x.style.display = "none";
  
  } else {
    x.style.display = "block";
  }
}
</script>

Раздел «сэм-сек» по умолчанию скрыт. Я хотел бы добавить функцию, чтобы, когда кнопка «Южная Америка» нажата и раздел стал видимым, окно автоматически прокручивалось до этого раздела.

Ответ №1:

Подобный этому

  1. Делегируйте и дайте атрибут данных
  2. используйте scrollIntoView
  3. переключите класс вместо использования стиля.отображение

Фиктивный div предназначен только для интервалов во время теста

 window.addEventListener("load", function() {
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target
    if (tgt.classList.contains("scrollAndShow")) {
      const id = tgt.dataset.id;
      const div = document.getElementById(id);
      if (div) {
        div.classList.toggle("hide")
        if (!div.classList.contains("hide")) div.scrollIntoView({behavior: "smooth"});
      }
    }
  })
}) 
 .hide {
  display: none
}

.dummy { display:block; height:500px } 
 <div id="nav">
  <button type="button" class="scrollAndShow" data-id="sam-sec">South America</button>
  <button type="button" class="scrollAndShow" data-id="eur-sec">Europe</button>
</div>
<div class="dummy"><hr/></div>
<div id="sam-sec" class="hide">South America</div>
<div class="dummy"><hr/></div>
<div id="eur-sec" class="hide">Europe</div>

Ответ №2:

И для плавного прокрутки попробуйте это:

 .hidden {
  display: none;
} 
 <button onclick="myFunction_sa()">
  South America
</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="sam-sec" class="hidden">South America</div>

<script>
  function myFunction_sa() {
    var x = document.getElementById("sam-sec");
    if (x.style.display === "block") {
      x.classList.add('hidden');

    } else {
      x.classList.remove('hidden');; // You wanted it visible prior to scroll so this comes first  
      x.scrollIntoView({
        behavior: 'smooth'
      }); // added '{behavior: 'smooth'}' for smooth scroll
    }
  }
</script>

Ответ №3:

 body{
    scroll-behaviour: smooth;
} 
 <a href="#SA"><button>South America</button></a>
<br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br><br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br><br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br><br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br>
<h2 id="SA">South America</h2>

Легко

Метки: