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

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

});

 

참고: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element
참고: https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery
참고: jQuery 스크롤시 화면이 페이드 되면서 나타나는 기능