jquery - How to simplify following multiple onclick function -

i have following code , need mothod simplify onclick function instead of repeating many times.

function onloadhandler() {     var st1 = $("#i11031821").contents().find("p:contains('application , acceptance of')");     var st2 = $("#i11031821").contents().find("p:contains('provision of services')");     var st3 = $("#i11031821").contents().find("p:contains('users generally')");     var st4 = $("#i11031821").contents().find("p:contains('member accounts')");     var st5 = $("#i11031821").contents().find("p:contains('member’s responsibilities')");     var st6 = $("#i11031821").contents().find("p:contains('breaches members')");     var st7 = $("#i11031821").contents().find("p:contains('transactions between buyers and')");     var st8 = $("#i11031821").contents().find("p:contains('limitation of liability')");     var st9 = $("#i11031821").contents().find("p:contains('force majeure')");     var st10 = $("#i11031821").contents().find("p:contains('intellectual property rights')");     var st11 = $("#i11031821").contents().find("p:contains('notices')");     var st12 = $("#i11031821").contents().find("p:contains('general provisions')");     var st21 = $("#i11022249").contents().find("p:contains('1. application')");     var st22 = $("#i11022249").contents().find("p:contains('2. provision')");     var st23 = $("#i11022249").contents().find("p:contains('3. users')");     var st24 = $("#i11022249").contents().find("p:contains('4. member')");     var st25 = $("#i11022249").contents().find("p:contains('5. member’s')");     var st26 = $("#i11022249").contents().find("p:contains('6. breaches')");     var st27 = $("#i11022249").contents().find("p:contains('7. transactions')");     var st28 = $("#i11022249").contents().find("p:contains('8. limitation')");     var st29 = $("#i11022249").contents().find("p:contains('9. force')");     var st30 = $("#i11022249").contents().find("p:contains('10. intellectual')");     var st31 = $("#i11022249").contents().find("p:contains('11. notices')");     var st32 = $("#i11022249").contents().find("p:contains('12. general')");     $(st1).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st21).offset().top         }, 2000);     });     $(st2).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st22).offset().top         }, 2000);     });     $(st3).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st23).offset().top         }, 2000);     });     $(st4).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st24).offset().top         }, 2000);     });     $(st5).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st25).offset().top         }, 2000);     });     $(st6).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st26).offset().top         }, 2000);     });     $(st7).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st27).offset().top         }, 2000);     });     $(st8).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st28).offset().top         }, 2000);     });     $(st9).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st29).offset().top         }, 2000);     });     $(st10).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st30).offset().top         }, 2000);     });     $(st11).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st31).offset().top         }, 2000);     });     $(st12).on('click', function(event) {         $('html, body').animate({             scrolltop: $(st32).offset().top         }, 2000);     });     $([st1[0], st2[0], st3[0], st4[0], st5[0], st6[0], st7[0], st8[0], st9[0], st10[0], st11[0], st12[0]]).css({         "width": "300px",         "padding": "10px",         "border": "solid 1px silver",         "margin-bottom": "2px",         "box-shadow": " 0px 0px 5px silver",         "cursor": "pointer"     }); } 

like said in comment below question: «this job anchor tags in html».
won't have animate effect, wich want.

here best answer can give without seeing html.

i used class "toc" here, table of content headings...
, used "content", content heading...
can name them ;)

those classes define css and used selectors in jquery.

define css, preferably in <head> section of document.
here suggestions:

<style> .toc{     /* define css specific toc heading here */     /* here inpiration example */     font-weight:bold;     text-shadow:2px 3px #ccc;     cursor: pointer; } .content{     width: 300px;     padding: 10px;     border: solid 1px silver;     margin-bottom: 2px;     box-shadow:  0px 0px 5px silver;     cursor: pointer; } </style> 

the script jquery:

$(".toc, .content").on('click', function() {      // title clicked... either in toc or content.     var thistitle = $(this).html();     var thiscontent;      // find relative content.     $(".content").each(function(){         if( $(this).html() == thistitle ){             thiscontent = $(this);         }     });      // animate content.     $('html, body').animate({         scrolltop: thiscontent.offset().top     }, 2000); }); 

notice first $(this) selector represent clicked element.
while second represent inspected element while each loop iterations.

also notice titles in toc , in content must same script work.
should case kind of document, anyway.

---

made bonus "back toc" function.

css:

.backtotoc{     /* here inpiration "back toc link" */     color:#c44;     width:calc(100% - 1em);     text-align:right;     margin-right:1em;     cursor: pointer; } 

script:

$(".backtotoc").click(function(){     $('html, body').animate({         scrolltop: 0     }, 2000); }); 

see code running in codepen.