Прокрутите список до определенного элемента Используя html

Есть ли метод в html, который заставляет веб-страницу прокручивать определенный элемент с помощью HTML!?

Ответ 1

Да, вы используете этот

<a href="#google"></a>

<div id="google"></div>

Но это не создает плавный прокрутки, чтобы вы знали.

Ответ 2

Вы должны указать, хотите ли вы, чтобы он плавно прокручивал или просто переходил к элементу. Прыгать легко и может быть сделано только с помощью HTML или Javascript. Самое простое - использовать привязку. Ограничение состоит в том, что каждый элемент, который вы хотите прокрутить, должен иметь id. Побочным эффектом является то, что #theID будет добавлено к URL

<a href="#scroll">Go to Title</a>
<div>
  <h1 id="scroll">Title</h1>
</div>

Вы можете добавлять эффекты CSS к цели при нажатии ссылки с помощью селектора CSS :target.

С некоторыми базовыми JS вы можете сделать больше, а именно метод scrollIntoView(). Элементам не нужен идентификатор, хотя он еще проще, например

function onLinkClick() {
  document.getElementsByTagName('h2')[3].scrollIntoView();
  // will scroll to 4th h3 element
}

Наконец, если вам нужна плавная прокрутка, вы должны взглянуть на JS Smooth Scroll или этот фрагмент для jQuery. (NB: возможно, есть много других).

Ответ 3

<!-- HTML -->
<a href="#google"></a>
<div id="google"></div>

/*CSS*/
html { scroll-behavior: smooth; }

Кроме того, вы можете добавить html {scroll-поведения: smooth; } to your CSS to create a smooth scroll. } к вашему CSS, чтобы создать плавную прокрутку.

Ответ 4

Добавьте это в свой javascript:

$('.smooth-goto').on('click', function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
    return false;
});

Кроме того, не забудьте также добавить этот класс в свой тег:

<a href="#id-of-element" class="smooth-goto">Text</a>

Ответ 5

Да, вы можете использовать якорь , указав атрибут id элемента и связав его с хешем.

Например (взято из спецификации W3):

You may read more about this in <A href="#section2">Section Two</A>.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to <A href="#section2">Section Two</A> above
for more details.

Ответ 6

Используя атрибут href внутри тега привязки, вы можете прокручивать страницу до определенного элемента с помощью # перед именем идентификатора элементов.

Кроме того, вот несколько jQuery/JS, которые будут выполнять перенос переменных в div.

<html>
<body>

Click <a href="#myContent">here</a> to scroll to the myContent section.

<div id="myContent">
...
</div>

<script>
    var myClassName = "foo";

    $(function() {
        $("#myContent").addClass(myClassName);
    });
</script>

</body>

Ответ 7

<nav>
  <a href="#section1">1</a> 
  <a href="#section2">2</a> 
  <a href="#section3">3</a>
</nav>
<section id="section1">1</section>
<section id="section2" class="fifty">2</section>
<section id="section3">3</section>

<style>
  * {padding: 0; margin: 0;}
  nav {
    background: black;
    position: fixed;
  }
  a {
    color: #fff;
    display: inline-block;
    padding: 0 1em;
    height: 50px;
  }
  section {
    background: red;
    height: 100vh;
    text-align: center;
    font-size: 5em;
  }

  #section1{
    background-color:green;
  }
  #section3{
    background-color:yellow;
  }

</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
  $(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
  });
</script>