[html + Java Script] id 위치에서 특정 위치 만큼 이동

HTML

<!--네비게이션 목록-->

<ul class="nav_main_list">
     <li><a href="javascript:id_move('category_nav01');">Menu1</a></li>
     <li><a href="javascript:id_move('category_nav02');">Menu2</a></li>
     <li><a href="javascript:id_move('category_nav03');">Menu3</a></li>
     <li><a href="javascript:id_move('category_nav04');">Menu4</a></li>
     <li><a href="javascript:id_move('category_nav05');">Menu5</a></li>
     <li><a href="javascript:id_move('category_nav06');">Menu6</a></li>
</ul>

 

<!--이동할 위치 설정-->

<div id="category_nav01">Menu1</div>

<div id="category_nav02">Menu2</div>

<div id="category_nav03">Menu3</div>

<div id="category_nav04">Menu4</div>

<div id="category_nav05">Menu5</div>

<div id="category_nav06">Menu6</div>

 

---

css

.nav_main_list{display: flex; list-style: none; }
.nav_main_list li{margin-right: 25px; }
.nav_main_list a {text-decoration: none;}

 

Comment    ※ 리스트 왼쪽으로 나열        display: inline-flex;    ※ li 리스트 점 없애기        list-style: none;    ※ a 태그 밑줄 없애기        text-decoration: none;    ※ div에 마우스 hover 손가락 아이콘 나타내기        cursor: pointer;

 

---

Java Script

<script>
     function id_move(p_id){
         $('html').animate({'scrollTop':$("#"+p_id).offset().top-50});
     }
</script>