Как упростить следующую функцию onclick

Question

У меня есть следующий код и нужна помощь любому mothod, чтобы упростить функцию onclick, а не повторять много раз.

function onLoadHandler() { 
    var st1 = $("#i11031821").contents().find("p:contains('Application and 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 by 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" 
    }); 
} 

Answer 1

Как сказал в комментарии ниже Ваш вопрос: «Это работа для якорных тегов в HTML».
Но у вас не будет эффекта одушевленности, который, очевидно, вы хотите.

Вот лучший ответ, который я могу дать, не видя HTML.

Я использовал класс «Toc» здесь, для оглавления заголовков ...
И я использовал «Content», для заголовка контента ...
Но вы можете назвать их, как вам нравится;)

Эти классы будут определять CSS и будут использоваться в качестве селекторов в jQuery.

Определите свой CSS, предпочтительно в разделе <head> документа.
Вот мои предложения:

<style> 
.Toc{ 
    /* Define the CSS specific to the TOC heading here */ 
    /* Here is my inpiration for the 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> 

Сценарий JQuery:

$(".Toc, .Content").on('click', function() { 

    // Get the title clicked... Either in TOC or Content. 
    var thisTitle = $(this).html(); 
    var thisContent; 

    // Find the relative content. 
    $(".Content").each(function(){ 
     if($(this).html() == thisTitle){ 
      thisContent = $(this); 
     } 
    }); 

    // Animate to content. 
    $('html, body').animate({ 
     scrollTop: thisContent.offset().top 
    }, 2000); 
}); 

Уведомление, что первый $(this) селектор представляет Clicked элемент.
В то время как вторая представляет собой проверенный элемент, в то время как каждая итерация цикла.

Также обратите внимание, что названия в оглавлении и в содержании MUST быть точно такой же для этого сценария на работу.
В любом случае это относится к этому типу документа.

---

Я сделал вам бонус "Назад к оглавлению" функции.

CSS:

.backtoTOC{ 
    /* Here is my inpiration for the "back to TOC link" */ 
    color:#c44; 
    width:calc(100% - 1em); 
    text-align:right; 
    margin-right:1em; 
    cursor: pointer; 
} 

Сценарий:

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

Смотреть все этот код работает в CodePen.

Answer 2

Вы можете выполнить поиск по каждой вкладке p, используя один запрос, который вернет все экземпляры совпадающего p-тега. Дайте всем вашим тегам функцию поиска с помощью запятой. Как это

var clickable_elements = $("#i11031821, #i11022249").contents().find("p:contains('Application and Acceptance of'), p:contains('anything else')"); 

Это возвращает все совпадающие элементы. Теперь вы можете легко получить однократное событие.

$(clickable_elements).on('click', function(event) { 
     var self = $(this); 
     $('html, body').animate({ 
      scrollTop: self.offset().top 
     }, 2000); 
    }); 

И вы это сделали.