单击以滚动到 div 中的内容 JQuery 无法正常工作答案

【问题标题】：Click to scroll to content within div JQuery not working correctly单击以滚动到 div 中的内容 JQuery 无法正常工作
【发布时间】：2016-11-19 18:02:09
【问题描述】：

我有一个选项卡式部分，其中包含基于链接单击位置的 div 滚动内容，但滚动无法正常工作，这里是 JSfiddle demo

这是点击时触发的代码

$(document).ready(function ($){
    $('.scrollable_tab > ul > li > a[href^="#"]').on('click', function(event) {
        var target = $(this.getAttribute('href'));
        if( target.length ) {
            event.preventDefault();
            $('.scrollable_content_main').stop().animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });
});

请帮忙！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您还需要考虑容器 div。试试这样。

$('.scrollable_tab > ul > li > a[href^="#"]').on('click', function(event) {
        var target = $(this.getAttribute('href'));
        console.log($(".scrollable_content_main").scrollTop()+target.offset().top );
        if( target.length ) {
            event.preventDefault();
            $('.scrollable_content_main').animate({
                scrollTop: $(".scrollable_content_main").scrollTop() + target.offset().top 
            }, 1000);
        }
    });

小提琴：https://jsfiddle.net/xcht52eh/

【讨论】：