在不滚动文档的情况下平滑滚动文档的子元素

Question

典型的平滑滚动有上百万个答案。不同之处在于，我试图让 element2（带有滚动条）在单击 element1 中的 link 时平滑滚动。也许这是不可能的。元素滚动（不慢），不幸的是父 window 也滚动。我将前往 HTML、jQuery 和 CSS...

HTML:

<div class="element1">
<a href="#123">Click to See Listing</a>
<a href="#124">Click to See Listing</a>
<a href="#125">Click to See Listing</a>
</div>

<div class="element2 listings">
<div class="listing" id="123">element contents</div>
<div class="listing" id="124">element contents</div>
<div class="listing" id="125">element contents</div>
etc. etc.
</div>

jQuery:

<script>
    jQ=jQuery.noConflict();
    jQ(document).ready(function(){
        jQ("a").on('click', function(event) {
            if (this.hash !== "") {
                event.preventDefault();
                var hash = this.hash;
                jQ('html, body').animate({
                    scrollTop: jQ(hash).offset().top-100
                }, 800);
            }
        });
    });
</script>

我也试过 jQ('.listings') 而不是 jQ('html, body')

CSS:

.listings {
width:300px;
height:500px;
overflow-y:scroll;
}

Answer 1

您可以使用

$('.listings').animate({
      scrollTop: ($(hash).offset().top + $('.listings').scrollTop())- 20
 }, 800);

问题是当您包含 offset() 时，您还需要包含 scrollContainer 的当前滚动值

附上 fiddle 供参考 https://jsfiddle.net/70b9mry4/

在不滚动文档的情况下平滑滚动文档的子元素

Smooth Scrolling Child Element of Document without Scrolling Document

jquery

smooth-scrolling