展開前如何將活動手風琴滾動到頂部

Question

我已經使用html，css和jquery創建了一個手風琴

每當展開手風琴時，我都希望滾動手風琴標題並使其位於展開之前的頁面頂部（不包括少許空間，以免覆蓋固定的導航欄）

我希望此方法適用於所有手風琴，無論其默認位置如何（例如，頁面下方的手風琴在擴展自身之前應先滾動到頂部）

我嘗試對相關的CSS類使用scrollTop（0），但似乎不起作用

它只需要在Jquery代碼中進行一些更改

希望有人能夠提供幫助

在代碼段中附加所有代碼（對於此特定示例，我在頁面的頂部放置了一個手風琴，在頁面的底部放置了一個手風琴，以便可以輕松地檢查某人的查詢固定代碼是否按預期工作）

 $(document).ready(function () { function close_accordion_section() { $('.accordion .accordion-section-title').removeClass('active'); $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function (e) { // Grab current anchor value var currentAttrValue = $(this).attr('href'); if ($(e.target).is('.active')) { close_accordion_section(); } else { close_accordion_section(); // Add active class to section title $(this).addClass('active'); // Open up the hidden content panel $('.accordion ' + currentAttrValue).slideDown(300).addClass('open') } e.preventDefault(); }); }); 

 /*----- Accordion -----*/ .accordion, .accordion * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .accordion { overflow: hidden; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); border-radius: 3px; background: #f7f7f7; } /*----- Section Titles -----*/ .accordion-section-title { width: 100%; padding: 15px; display: inline-block; border-bottom: 1px solid #1a1a1a; background: #333; transition: all linear 0.15s; /* Type */ font-size: 1.200em; text-shadow: 0px 1px 0px #1a1a1a; color: #fff; } @media (hover: hover) { .accordion-section-title:hover { background: #4c4c4c; text-decoration: none; opacity: 0.5; } } .accordion-section-title.active{ background: #4c4c4c; text-decoration: none; opacity: 0.5; } .accordion-section:last-child .accordion-section-title { border-bottom: none; } /*----- Section Content -----*/ .accordion-section-content { max-height: calc(100vh - 120px); overflow-y: scroll; padding: 15px; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> <div id="accordion-1" class="accordion-section-content"> <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> Body Text Starts here<br><br> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32 <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a> <div id="accordion-2" class="accordion-section-content"> <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <!--end .accordion-section-content--> </div> <!--end .accordion-section--> </div> <!--end .accordion--> 

以下是自1500年代以來使用的Lorem Ipsum標准塊。 西塞羅（Cicero）的“ de Finibus Bonorum et Malorum”的第1.10.32和1.10.33節也以其原始格式復制，並附有H. Rackham於1914年翻譯的英文版本。

Answer 1

使用jQuery的animate（）方法添加平滑的頁面滾動

替換代碼

$('.accordion-section-content').scrollTop(0);

對於

$(".accordion-section a").on('click', function (event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 800, function () {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
        });
    } // End if
});