[HTML] smooth-scroll

<div class = "jump">


<a href = "#tab1" class = "bt">이동버튼1</a>
<a href = "#tab2" class = "bt">이동버튼2</a>
<a href = "#tab3" class = "bt">이동버튼3</a>
<a href = "#tab4" class = "bt">이동 버튼4</a>
<a href = "#tab5" class = "bt">이동 버튼5</a>


</div>


<div id = "tab1" class = "banner_bax1">
내용1

</div>

<div id = "tab2" class = "banner_bax2">
내용2

</div>



<div id = "tab3" class = "banner_bax3">
내용3

</div>



<div id = "tab4" class = "banner_bax4">
내용4

</div>





<div id = "tab5" class = "banner_bax5">
내용5

</div>

이렇게 만 입력하면 클릭시 툭툭 끊기는 느낌으로 대상 id가 있는 위치로 이동한다.

 

 

....역시 보기 싫다... 이럴떈 아래의 코드를 추가해주도록 한다.

 

사용된 js 스크립트는 검색하면 쉽게 찾을수 있다. 다운받아서 쓰거나 링크해서 쓰면 된다.

 

<link href="./css/contact.css" rel="stylesheet" type="text/css" />

  <script src="../lib/jquery/jquery.js"></script>
  <script src="../src/jquery.smooth-scroll.js"></script>
  <script>
$(document).ready(function() {
 
      $('body').smoothScroll({
        delegateSelector: '#tab1, #tab2, #tab3,#tab4, #tab5'
      });
 
    });

      $('p.subnav a').click(function(event) {
        event.preventDefault();
        var link = this;
        $.smoothScroll({
          scrollTarget: link.hash
        });
      });
    });
  </script>

 

 

 

<link href="./css/contact.css" rel="stylesheet" type="text/css" />

  <script src="../lib/jquery/jquery.js"></script>
  <script src="../src/jquery.smooth-scroll.js"></script>
  <script>
$(document).ready(function() {
 
      $('body').smoothScroll({
        delegateSelector: '#tab1, #tab2, #tab3,#tab4, #tab5'
      });
 
    });

      $('p.subnav a').click(function(event) {
        event.preventDefault();
        var link = this;
        $.smoothScroll({
          scrollTarget: link.hash
        });
      });
    });
  </script>



<div class = "c_title">대리점 모집 안내</div>
<div class = "c_title2">Business partner</div>


<div class = "jump">


<a href = "#tab1" class = "bt">이동버튼1</a>
<a href = "#tab2" class = "bt">이동버튼2</a>
<a href = "#tab3" class = "bt">이동버튼3</a>
<a href = "#tab4" class = "bt">이동 버튼4</a>
<a href = "#tab5" class = "bt">이동 버튼5</a>


</div>


<div id = "tab1" class = "banner_bax1">
내용1

</div>

<div id = "tab2" class = "banner_bax2">
내용2

</div>



<div id = "tab3" class = "banner_bax3">
내용3

</div>



<div id = "tab4" class = "banner_bax4">
내용4

</div>





<div id = "tab5" class = "banner_bax5">
내용5

</div>

 

 

이렇게 적용하면 스크롤이 드래그 하는거처럼 부드럽게 이동한다. 

 

https://www.w3schools.com/cssref/pr_scroll-behavior.asp

CSS scroll-behavior property

http://pf.kakao.com/_Fcxbxbxj

그미의 교육실

http://pf.kakao.com/_hznGxj

그미의 게임 정보

http://pf.kakao.com/_RAnGxj

그미의 애니 정보