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

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

224 голосов
/ 02 июля 2010

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

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

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

или 

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

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

Ответы [ 16 ]

2 голосов
/ 02 июля 2018

Это работает: 

$('.scroll').on("click", function(e) {

  e.preventDefault();

  var dest = $(this).attr("href");

  $("html, body").animate({

    'scrollTop':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Просто добавьте класс 'scroll' к любым ссылкам, которые вы хотите анимировать

1 голос
/ 13 февраля 2019

решение vue2 ... добавьте простое свойство данных, чтобы просто принудительно обновить 

  const app = new Vue({ 
  ... 

  , updated: function() {
           this.$nextTick(function() {
           var uri = window.location.href
           var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
           if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
              this.updater = "" // only on page-load !
              location.href = "#"+String(anchor)
           }
         })
        }
     });
     app.updater = "page_load"

 /* smooth scrolling in css - works in html5 only */
 html, body {
     scroll-behavior: smooth;
 }
1 голос
/ 17 июля 2018 

jQuery("a[href^='#']").click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
    }, 1000);
    return false;
});
1 голос
/ 18 августа 2017

Это рабочий скрипт, который прокрутит страницу до якоря.Для настройки просто присвойте ссылке привязки идентификатор, соответствующий атрибуту имени привязки, к которой вы хотите перейти.

1 голос
/ 06 января 2015

Я знаю, что это действительно старый вопрос, но я нашел простое и простое решение jQuery в css-tricks .Это тот, который я использую сейчас. 

$(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;
      }
    }
  });
});
0 голосов
/ 05 июля 2019

2019 Плавно прокрутите до нужной позиции

Просто получите правильную Y координату и используйте window.scrollTo.

const yourElement = document.getElementById('anchorName2');
const yCoordinate = yourElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({
    top: yCoordinate,
    behavior: 'smooth'
});

scrollIntoView также является хорошим вариантом, но в некоторых случаях он может не работать идеально.Например, когда вам нужно дополнительное смещение .С scrollTo вам просто нужно добавить это смещение к yCoordinate следующим образом: 

const yOffset = -10; 

window.scrollTo({
    top: yCoordinate + yOffset,
    behavior: 'smooth'
});
Страница:
...