복붙노트

[JQUERY] 어떻게 주어진 앵커로 스크롤 HTML 페이지에?

JQUERY

어떻게 주어진 앵커로 스크롤 HTML 페이지에?

해결법

  1. 1.

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

    아니 jQuery를 전혀 필요!

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

  3. 3.당신이 사용할 수있는 jQuerys는 .animate (), .offset ()와 scrollTop. 처럼

    당신이 사용할 수있는 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;

  4. 4.

    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에 데모 예제

    지원하다:

    그들은 지원을 보여줍니다 더 나은 scrollTo에서 그 스크롤 scrollTo와 같은 방법으로 쓸 수 있지만.

    방법에 대한 자세한

  5. 5.jAndy에 의해 훌륭한 솔루션하지만, 부드러운 스크롤 파이어 폭스에서 작업에 문제가있는 것 같다.

    jAndy에 의해 훌륭한 솔루션하지만, 부드러운 스크롤 파이어 폭스에서 작업에 문제가있는 것 같다.

    이 방법을 쓰는 것은 물론 파이어 폭스에서 작동합니다.

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

  6. 6.JQuery와없는 순수 자바 스크립트 솔루션입니다. 크롬 & 즉에서 테스트, IOS에 테스트하지

    JQuery와없는 순수 자바 스크립트 솔루션입니다. 크롬 & 즉에서 테스트, 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/

  7. 7.2018에서는 다음과 같이 간단 위해 jQuery를 필요가 없습니다. scrollIntoView () 메소드가 지원하는 페이지의 모든 요소에 부드럽게 스크롤에 "행동"속성에 내장. 당신은 그것으로 북마크 만들기 위해 해시 브라우저 URL을 업데이트 할 수 있습니다.

    2018에서는 다음과 같이 간단 위해 jQuery를 필요가 없습니다. scrollIntoView () 메소드가 지원하는 페이지의 모든 요소에 부드럽게 스크롤에 "행동"속성에 내장. 당신은 그것으로 북마크 만들기 위해 해시 브라우저 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()
    })
}

  8. 8.올바른 y 좌표와 window.scrollTo 사용 가져 오기 ({: 예, 행동 : 최고를 '부드럽게'})

    올바른 y 좌표와 window.scrollTo 사용 가져 오기 ({: 예, 행동 : 최고를 '부드럽게'})

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

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

    scrollIntoView 좋은 옵션이 너무이지만 않을 수없는 경우에 완벽하게 작동합니다. 예를 들어, 당신은 오프셋 추가해야 할 때. scrollTo와 함께 당신은 다음과 같이 오프셋 추가해야합니다 :

    const yOffset = -10; 

window.scrollTo({top: y + yOffset, behavior: 'smooth'});

  9. 9.

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

  10. 10.CSS-트릭에서이 솔루션은 더 이상 jQuery를 2.2.0에서 작동하지 않습니다. 그것은 선택의 오류가 발생합니다 :

    CSS-트릭에서이 솔루션은 더 이상 jQuery를 2.2.0에서 작동하지 않습니다. 그것은 선택의 오류가 발생합니다 :

    나는 선택을 변경하여 해결했습니다. 전체 조각은 이것이다 :

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

  11. 11.이 작품 :

    이 작품 :

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

  e.preventDefault();

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

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

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

  }, 2000);

});

    https://jsfiddle.net/68pnkfgd/

    그냥 당신이 애니메이션에 원하는 링크 클래스 '스크롤'추가

  12. 12.주어진 앵커로 페이지를 스크롤 브라우저를 만드는 가장 쉬운 방법은있는 style.css *를 입력하는 것입니다 {스크롤 동작을 : 부드러운;} 당신의 HTML 탐색 사용 #NameOfTheSection에서

    주어진 앵커로 페이지를 스크롤 브라우저를 만드는 가장 쉬운 방법은있는 style.css *를 입력하는 것입니다 {스크롤 동작을 : 부드러운;} 당신의 HTML 탐색 사용 #NameOfTheSection에서

    * {스크롤 동작 : 부드러운;} 홈 를

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션

    다른 섹션 <섹션 ID = "스크롤을">

    는이 부분을 아래로 스크롤

  13. 13.이 앵커로 페이지를 스크롤 작업 스크립트입니다. 설정하려면 단지 앵커 링크 당신이에 스크롤에 원하는 앵커의 이름 속성과 일치하는 ID를 제공합니다.

    이 앵커로 페이지를 스크롤 작업 스크립트입니다. 설정하려면 단지 앵커 링크 당신이에 스크롤에 원하는 앵커의 이름 속성과 일치하는 ID를 제공합니다.

    <script>
jQuery(document).ready(function ($){ 
 $('a').click(function (){ 
  var id = $(this).attr('id');
  console.log(id);
  if ( id == 'cet' || id == 'protein' ) {
   $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); 
  }
 }); 
});
</script>

  14. 14.jQuery를 ( "A [^ HREF = '#']"). 클릭 (함수 () { jQuery를 ( 'HTML 바디'). 애니메이션 ({ scrollTop :. jQuery를 (jQuery를 (이) .attr ( 'HREF')) .offset () 상단 } 1000); false를 반환; });

    jQuery를 ( "A [^ HREF = '#']"). 클릭 (함수 () { jQuery를 ( 'HTML 바디'). 애니메이션 ({ scrollTop :. jQuery를 (jQuery를 (이) .attr ( 'HREF')) .offset () 상단 } 1000); false를 반환; });

  15. 15.대부분의 답변은 불필요하게 복잡합니다.

    대부분의 답변은 불필요하게 복잡합니다.

    방금 대상 요소로 이동하려는 경우, 당신은 자바 스크립트를 필요로하지 않습니다

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

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

    당신이 animatedly 대상으로 스크롤하려면, Shahil의 답변을 @ 참조하십시오.

  16. 16.나는이 질문은 정말 오래 알고,하지만 난 CSS 트릭에 쉽고 간단하게 jQuery를 솔루션을 발견했다. 그게 내가 지금 사용하고있어 하나입니다.

    나는이 질문은 정말 오래 알고,하지만 난 CSS 트릭에 쉽고 간단하게 jQuery를 솔루션을 발견했다. 그게 내가 지금 사용하고있어 하나입니다.

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

  17. 17.vue2 솔루션은 ... 단순히 업데이트를 강제로 간단한 데이터 속성을 추가

    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;
 }

    18. from https://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] ID가 점을 포함하는 경우 어떻게 jQuery로 ID로 HTML 노드를 선택하려면?  (0) 2020.10.02
[JQUERY] 사업부에 매 3 명 div가 랩  (0) 2020.10.02
[JQUERY] 어떻게 사용 slideDown (또는 쇼) 테이블 행에 함수?  (0) 2020.10.02
[JQUERY] jQuery를 테이블 정렬  (0) 2020.10.01
[JQUERY] 자기 스트랩 = DISS?  (0) 2020.10.01
,

티스토리툴바