Как прокрутить HTML-страницу до заданного якоря?

Question

Мне бы хотелось, чтобы браузер прокручивал страницу до заданной привязки, просто используя JavaScript.

Я указал атрибут name или id в своем HTML-коде:

 <a name="anchorName">..</a>

или

 <h1 id="anchorName2">..</h1>

Я бы хотел получить тот же эффект, что и вы, перейдя на http://server.com/path#anchorName. Страница должна быть прокручена так, чтобы привязка находилась рядом с верхней частью видимой части страницы.

Answer 1

function scrollTo(hash) {
    location.hash = "#" + hash;
}

JQuery вообще не требуется!

Answer 2

Путь проще:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

Answer 3

Вы можете использовать jQuerys .animate () , .offset () и scrollTop. Как

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

пример ссылки: http://jsbin.com/unasi3/edit

Если вы не хотите анимировать, используйте .scrollTop () как

$(document.body).scrollTop($('#anchorName2').offset().top);

или нативные javascripts location.hash как

location.hash = '#' + anchorid;

Answer 4

Отличное решение от jAndy, но, похоже, проблемы с плавной прокруткой возникают в Firefox.

Написание этого способа работает и в Firefox.

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

Answer 5

Чистое решение Javascript без JQuery. Протестировано на Chrome & I.e, не протестировано на IOS

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

демо: https://jsfiddle.net/jd7q25hg/12/

Answer 6

2018 Чистый JS:

Существует очень удобный способ прокрутки до элемента:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

Но, насколько я понимаю, он не имеет такой хорошей поддержки, как варианты ниже.

Узнайте больше о методе.

---

Если необходимо, чтобы элемент находился сверху:

const element = document.querySelector('#element')
const top = element.getBoundingClientRect().top

window.scrollTo({
  top, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Демонстрационный пример на Codepen

---

Если вы хотите, чтобы элемент находился в центре:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Демонстрационный пример на Codepen

---

Поддержка:

Они пишут, что scroll - это тот же метод, что и scrollTo, но поддержка лучше проявляется в scrollTo.

Подробнее о методе

Answer 7

В 2018 году вам не нужен jQuery для чего-то такого простого.Встроенный метод [scrollIntoView()][1] поддерживает свойство "behavior" для плавной прокрутки к любому элементу на странице.Вы даже можете обновить URL браузера с помощью хэша, чтобы сделать его доступным для закладки.

Из этого руководства по прокрутке HTML-закладок , вот родной способ добавить плавную прокрутку ко всем ссылкам ссылки настраница автоматически:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Answer 8

Большинство ответов неоправданно сложны.

Если вы просто хотите перейти к целевому элементу, вам не нужен JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

Если вы хотите оживленно прокрутить до цели , обратитесь к ответу @ Shahil.

Answer 9

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

Answer 10

Решение от CSS-Tricks больше не работает в jQuery 2.2.0.Будет выброшена ошибка селектора:

Ошибка времени выполнения JavaScript: синтаксическая ошибка, нераспознанное выражение: a [href * = #]: нет ([href = #])

Я исправил это, изменив селектор.Полный фрагмент этого:

$(function() {
  $("a[href*='#']:not([href='#'])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
 });
});