[javascript] 주어진 앵커로 HTML 페이지를 스크롤하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

JavaScript를 사용하여 브라우저가 페이지를 주어진 앵커로 스크롤하도록하고 싶습니다.

내 HTML 코드에서 name또는 id속성을 지정했습니다 .

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

또는

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

로 이동하여 얻을 수있는 것과 동일한 효과를 얻고 싶습니다 http://server.com/path#anchorName. 앵커가 페이지의 보이는 부분의 상단 근처에 오도록 페이지를 스크롤해야합니다.

답변

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

전혀 jQuery가 필요하지 않습니다!

답변

더 간단한 방법 :

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();

답변

jQuerys .animate () , .offset () 및을 사용할 수 있습니다 scrollTop. 처럼

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

링크 예 : http://jsbin.com/unasi3/edit

당신은 애니메이션을 사용하지 않으려면 .scrollTop () 와 같은

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

또는 자바 스크립트 location.hash처럼

location.hash = '#' + anchorid;

답변

jAndy의 훌륭한 솔루션이지만 부드러운 스크롤은 firefox에서 작동하는 데 문제가있는 것 같습니다.

이 방법으로 작성하면 Firefox에서도 작동합니다.

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

답변

2018-2020 순수 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 topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // 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.

방법에 대한 추가 정보

답변

JQuery가없는 순수한 자바 스크립트 솔루션. Chrome 및 Ie에서 테스트되었으며 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/

답변

2018 년에는 이와 같은 간단한 것을 위해 jQuery가 필요하지 않습니다. 내장 scrollIntoView()메소드는 ” 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()
    })
}