Smooth Scrolling
첨부파일 https://eond.com/jquery/432508

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior.

html {
  scroll-behavior: smooth;
}

And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth scrolling, like this:

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

Dustan Kasten has a polyfill for this. And you’d probably only reach for this if you were doing something with scrolling the page that couldn’t be done with #target jump links and CSS.

#Accessibility of Smooth Scrolling

Whatever technology you use for smooth scrolling, accessibility is a concern. For example, if you click a #hash link, the native behavior is for the browser to change focus to the element matching that ID. The page may scroll, but the scrolling is a side effect of the focus changing.

If you override the default focus-changing behavior (which you have to, to prevent instant scrolling and enable smooth scrolling), you need to handle the focus-changing yourself.

Heather Migliorisi wrote about this, with code solutions, in Smooth Scrolling and Accessibility.

#Smooth Scroll with jQuery

jQuery can also do this. Here’s the code to perform a smooth page scroll to an anchor on the same page. It has some logic built in to identify those jump links, and not target other links.

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });


코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 1 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
142 [플러그인] webticker js loop 2020/07/02 0
141 [슬라이더 플러그인] glider.js autoplay 2020/06/24 0
140 [슬라이더 플러그인] bxslider 옵션 및 참조글 2018/03/02 0
139 가로 롤링 슬라이딩 배너 2020/06/06 0
138 sly.min.js 터치슬라이드 스와이프 파일 2020/05/19 0
137 [슬라이더 플러그인] 네이버 모바일 터치 슬라이드 메뉴 [1] 2020/05/13 0
136 [슬라이더 플러그인] jquery slider 비교 2018/01/01 0
135 [고급활용] 스와이프, 터치슬라이드 2016/06/19 0
134 [고급활용] jQuery 터치슬라이드 터치이벤트 파일 2015/08/26 0
133 [기초활용] [jQuery] toggle, if..else , switch 2018/04/27 0
현재글 Smooth Scrolling 2020/05/04 0
131 메뉴 클릭했을 때 스르륵 부드럽게 열리는 하위메뉴 2020/05/04 0
130 [기초활용] jquery on toggle 2017/12/20 0
129 [플러그인] 달력 스크립트 2019/10/24 0
128 jQuery 3 Bootstrap 4 Datepicker 2019/10/25 0
127 [기타 플러그인] 비밀글 jquery 더보기 2019/10/07 0
126 [슬라이더 플러그인] 비밀글 swiper slider 2019/10/05 0
125 [플러그인] Cascading Grid Gallery 2018/12/25 0
124 [기타 플러그인] jQuery Select Custom Library 2018/09/17 0
123 [플러그인] Free jQuery image viewer Plugins 2018/08/16 0

해시태그 디렉터리