简体   繁体   中英

Jquery smooth scroll doesn't work in fixed div

I want to add smooth scrool my links. But if divs inside fixed div it doesn't work. I tried many scrolling js functions but none of didn't work in my codes. You can see my codes and demo below.

  $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); var scroll; if($(window).scrollTop()==0){ scroll = ($target.offset().top) - 160 }else{ scroll = ($target.offset().top) - 60 } $('html, body').stop().animate({ 'scrollTop': scroll }, 900, 'swing', function () { //window.location.hash = target; }); }); }); 
 .content { height: 100%; } #left, #right { position: fixed; height: 100%; } #left { width: 50%; } #right { width: 50%; right: 0; background: #efefef; overflow-y: auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div id="left"> <a href="#about" class="btn">About</a> <a href="#contact" class="btn">Contact</a> </div> <div id="right"> <div id="about"> <h1>About</h1> <p>xx</p> </div> <div id="contact"> <h1>Contact</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi nihil aspernatur quae suscipit maiores asperiores dolor dicta doloribus, facilis quas, cum. Eveniet, debitis alias quae beatae veritatis expedita assumenda voluptatem, maxime autem sunt vero velit eum, facilis illum magni neque soluta exercitationem. Odio distinctio incidunt ratione fugiat dicta non qui officia, obcaecati, ea cumque iusto quam et, accusantium unde eaque similique in! Eveniet culpa hic illo asperiores possimus itaque dolorem sapiente minima praesentium esse odio, illum beatae, voluptatem at error quo quisquam harum. Aut culpa ipsum soluta et in facere deserunt cum. Aliquam quis voluptatem laborum voluptatibus inventore ut optio, ad, ducimus harum maiores laboriosam ratione temporibus aut, ipsum ullam minima excepturi nisi aspernatur in repellat aperiam. Praesentium ea laborum corporis, voluptates earum tempora et ipsa quibusdam dolores amet nihil autem nisi, explicabo accusantium. Eos fugit aut eveniet eum expedita nihil aliquam ipsum voluptatem minus, nam officiis praesentium neque consectetur a, eius corporis repellat laborum dignissimos doloribus itaque ullam distinctio, dolorem rerum libero cum! Ducimus labore, unde eos nulla modi placeat consequatur aliquid vero in dolore eum, deserunt quas iure sapiente repellat, libero provident beatae necessitatibus asperiores aspernatur sunt mollitia suscipit adipisci! Non cupiditate ea quae, quia? Harum doloremque vitae dicta officia molestias a inventore sequi, minus tenetur perferendis. Odio sit ad nostrum labore, dolorem dolores iusto, recusandae quidem blanditiis? Error modi accusamus ratione repellat quaerat quas asperiores tempora vel ipsum sequi omnis deserunt qui, debitis quod explicabo unde enim necessitatibus nulla eligendi voluptatem beatae veniam! Eligendi quia praesentium iste officia. Eum aliquid, distinctio illo harum nobis, expedita tempore explicabo eius consequuntur a ut reiciendis nostrum amet voluptate officia omnis autem. Ea earum est numquam minus id! Temporibus quae, voluptatum explicabo, facere dolore voluptate blanditiis quod aspernatur consequatur porro. Sit doloribus accusamus veritatis autem totam praesentium, debitis iure, itaque eveniet ipsa amet possimus a recusandae. Aliquam cumque officiis quod hic optio illum, nulla, neque, quae necessitatibus voluptatem fuga tempore, vel harum repellat maiores blanditiis nisi ipsam doloremque a iure atque recusandae iusto commodi. Voluptatibus veritatis fuga asperiores cupiditate nemo impedit nihil vel quis inventore aut doloremque recusandae hic praesentium ipsam, animi dicta, odio nostrum illo velit ut error, labore. Facilis voluptatibus repudiandae laudantium quas. Repellendus aperiam recusandae at. Repellendus ut quas voluptatibus aperiam dolor? Obcaecati, esse doloribus id ad delectus. Natus veniam ipsam quam cum commodi, aperiam. Commodi earum consequuntur nam, suscipit autem, quos dolor impedit laborum assumenda saepe numquam, nesciunt tempore quibusdam magni dignissimos nihil praesentium libero ipsa aliquam doloremque veritatis quas unde laudantium atque! Voluptate similique odio dolores animi modi explicabo aliquid ex atque reiciendis voluptatibus suscipit aspernatur, debitis corrupti eligendi unde sequi iure maxime. Aspernatur iste dolorem nisi beatae tempore ea at rem consectetur, perspiciatis omnis, debitis explicabo eum nulla. Eaque provident magnam sequi, porro minus. Quae dignissimos optio quidem quasi reprehenderit! Repellat optio, sequi iure, libero tempora assumenda cumque eius autem, nesciunt itaque magnam provident dolore atque excepturi. Magnam aliquam quam, minus et ad error, voluptate assumenda esse laboriosam harum laudantium exercitationem optio eaque doloribus fuga, odit illo aspernatur aliquid dolor voluptatem incidunt? Adipisci, voluptatum, maxime! Cum odio aperiam dolor nihil sequi eum provident culpa ex, repellat id aspernatur alias magnam corrupti minima possimus commodi in consequatur mollitia at, ipsam quas officiis saepe! Rerum maiores mollitia placeat ex beatae illum cumque accusantium molestiae fugiat in officiis voluptatum nulla laboriosam molestias totam tenetur nobis amet voluptates iure, vel modi. Dolores blanditiis, provident culpa magni nulla soluta qui nostrum temporibus doloremque est voluptatibus at vitae ab reiciendis magnam optio. Quam repellat a illo quibusdam culpa nihil, tenetur, eius ipsa mollitia aspernatur natus soluta. Consequatur doloribus est, fuga.</p> </div> </div> </div> 

JSFiddle

change $('html, body').stop().animate to $('#right').stop().animate

jsfiddle: https://jsfiddle.net/ercanpeker/w6bcevkm/

I would offer a slightly different solution, mainly because the accepted answer has bugs related to its offset calculation that causes multiple clicks of a link to give the incorrect result.

This one also offers more reusable code that allows an offset to the scroll target to be defined on call.

function scrollToElem(target, $container, offset, duration, easing) {
    $container.stop().animate({
        'scrollTop': target.offsetTop + offset
    }, duration, easing);
}

$(function() {
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        scrollToElem(
            document.querySelector(this.hash),
            $('#right'),
            0,
            900,
            'swing'
        );
    });
});

JSFiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM