如何在javascript手风琴中禁用自动滚动

Question

I came across this accordion I would like to use for my site:

http://jsfiddle.net/subhranild/u5d35La7/1/

     <div class="accordion">
        <div class="accorfion-section">
            <a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
            <div id="accordion-1" class="accordion-section-content">
                <p>This is first accordion section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
            <div id="accordion-2" class="accordion-section-content">
                <p> this is second accordian section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
            <div id="accordion-3" class="accordion-section-content">
                <p> this is third accordian section</p>
            </div>
        </div>
    </div>



     $(document).ready(function(){
     $('.accordion-section-title').click(function(e){
         var currentAttrvalue = $(this).attr('href');
         if($(e.target).is('.active')){
             $(this).removeClass('active');
             $('.accordion-section-content:visible').slideUp(300);
         } else {
             $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
             $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
         }
     });
 });

however, whenever one of the headers is opened, the scroll moves to have the opened content at the top of the page. How can I edit this code to disable the auto-scroll?

I've seen some people online saying change the href to equal #, but when I do that the accordion no longer works.

Thanks.

Answer 1

Just by adding e.preventDefault(); on the click function in your Javascript as below working example.

 $(document).ready(function() { $('.accordion-section-title').click(function(e) { e.preventDefault(); var currentAttrvalue = $(this).attr('href'); if($(e.target).is('.active')) { $(this).removeClass('active'); $('.accordion-section-content:visible').slideUp(300); } else { $('.accordion-section-title').removeClass('active').filter(this).addClass('active'); $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300); } }); });

 .wrapper { height: 100%; } .accordion { overflow:hidden; border-radius:4px; background:#f7f7f7; } .accordion-section-title { width:100%; padding:15px; } .accordion-section-title { width: 100%; padding: 15px; display: inline-block; background-color: #333; border-bottom: 1px solid #1a1a1a; font-size: 1.2em; color: #fff; transition: all linear 0.5s; text-decoration:none; } .accordion-section-title.active { background-color:#4c4c4c; text-decoration:none; } .accordion-section-title:hover { background-color:grey; text-decoration:none; } .accordion-section:last-child .accordion-section-title { border-bottom:none; } .accordion-section-content { padding:15px; display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="wrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime. </p> <div class="accordion"> <div class="accorfion-section"> <a class="accordion-section-title" href="#accordion-1">Accordion section #1</a> <div id="accordion-1" class="accordion-section-content"> <p>This is first accordion section</p> </div> <a class="accordion-section-title" href="#accordion-2">Accordion section #2</a> <div id="accordion-2" class="accordion-section-content"> <p> this is second accordian section</p> </div> <a class="accordion-section-title" href="#accordion-3">Accordion section #3</a> <div id="accordion-3" class="accordion-section-content"> <p> this is third accordian section</p> </div> </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime. </p> </div>