このコードをすべて関数に結合することができますか、これを行う方法はこれだけですか？

Question

このJqueryコードは、ページ上の矢印をページ内でスクロールします。私はこれを行うためのより良い、より短い方法があるように感じる。私はあなたが探しているが、それでも、何か私は推測するものではないかもしれない答えを持っている

//Functions that make the arrows on the page scroll through the page. 
$("#arrow1").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#aboutMe").offset().top 
    }, 1000); 
}); 

$("#arrow2").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#skillsPart").offset().top 
    }, 1000); 
}); 

$("#arrow3").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#contactMe").offset().top 
    }, 1000); 
}); 

$("#arrow4").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#topPart").offset().top 
    }, 1000); 
}); 

Answer 1

...

$("#arrow1,#arrow2,#arrow3,#arrow4").click(function() { 
 
    var a1 = $("#aboutMe").offset().top, 
 
    a2 = $("#skillsPart").offset().top, 
 
    a3 = $("#contactMe").offset().top, 
 
    a4 = $("#topPart").offset().top; 
 
    switch ($(this).attr("id") { 
 
    case "arrow1": 
 
     $('html, body').animate({ 
 
     scrollTop: a1 
 
     }, 1000); 
 
     break; 
 
    case "arrow2": 
 
     $('html, body').animate({ 
 
     scrollTop: a2 
 
     }, 1000); 
 
     break; 
 
    case "arrow3": 
 
     $('html, body').animate({ 
 
     scrollTop: a3 
 
     }, 1000); 
 
     break; 
 
    case "arrow4": 
 
     $('html, body').animate({ 
 
     scrollTop: a4 
 
     }, 1000); 
 
     break; 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://jsfiddle.net/mn6184p1/2/

Answer 2

ますあなたがスクロールしたい要素とelemntを追加するだけで、より多くのクリックハンドラを簡単に追加できる再利用可能な関数を作成することができますあなただけの一の機能にそれを減らすことができ、あなたの実際のマークアップに基づいてels配列

var main = $('html, body'); 
function handleClick(el, scrollToEl) { 
    el.click(function() { 
    main.animate({ 
     scrollTop: scollToEl.offset().top 
    }, 1000); 
    }) 
} 

var els = [ 
    [$('#arrow1'), $("#aboutMe")], 
    [$('#arrow2'), $("#skillsPart")], 
    [$('#arrow3'), $("#contactMe"], 
    [$('#arrow4'), $("#topPart")] 
]; 

els.forEach(function(el){ 
    handleClick(el[0], el[1]); 
});