통합검색

Javascript

[Jquery] 메뉴 버튼 클릭 시 특정 위치로 스크롤 이동

  • 2025.04.15 10:39:34
 [!]HTML[/!]
 
<ul id="gnb">
    <li><a href="#brand">브랜드</a></li>
    <li><a href="#differentiation">브랜드차별화</a></li>
</ul>


<div id="brand" class="section">
    <h5>브랜드</h5>
</div>

<div id="differentiation" class="section">
    <h5>브랜드 차별화</h5>
</div>




 [!]Jquery[/!]
 
// 헤더 gnb 버튼
hd_gnb = {
    'init' : function() {
        this.action();
    },
    'action' : function() {
        var $ele = {
            'wrap' : $("body, html"),
            'btn' : $("#gnb > li > a")
        }       
        var countingClick = 0;
        var spd = 500;

        $ele.btn.on("click", function (e) {
            e.preventDefault();
            countingClick++;
            var menuAnchor = $(this).attr("href");
           
            if ($(this).parent().index() != 0) {
                $ele.wrap.animate({ scrollTop: $(menuAnchor).offset().top - $('#header').height() }, spd);
            } else {
                $ele.wrap.animate({ scrollTop: $(menuAnchor).offset().top }, spd);
            }
            return false;
        });
       
    }
}
$(function() {
    if($('#gnb > li > a').length>0){
        hd_gnb.init();
    }
});