jQuery 특정 id 객체로 화면 스크롤링 해서 이동하기

Web/jQuery

saltdoll 2018. 6. 2. 22:53

jQuery 특정 id 객체로 화면 스크롤링 해서 이동하고 싶을때가 있습니다.

예전에는 #Name <a name="#Name"> 태그를 사용했는데.

jQuery에서 Id 값을 줘서, 해당 위치로 애니메이션 스크롤링을 할 수가 있습니다.

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

자연스럽게 (smooth하게) 이동하기

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

Scrolling되면서, 투명도 변화시키기

01
$(window).ready(function(){

02
    var max = 1000; //100% 투명할때의 스크롤 값

03
    $(window).scroll(function(){

04
        var scrollPX = $(this).scrollTop();

05
        if( scrollPX  < max ) {

06
            $("#bg").css({"opacity": (max-scrollPX)/max });

07
        }else{

08
            $("#bg").css({"opacity": 0});

09
        }  

10
    });

11
});