Javascript 单击按钮滚动到特定div

我有一个页面，有一个固定的菜单和内容框（div）。 单击菜单时，内容框滚动至特定div

到目前为止还不错

这是这里的样品。

问题是，当我包装整个div并将其设置为show/hide切换按钮时，滚动不起作用

这是不起作用的样品。

这里还有一个片段

$（'.btn'）。单击（函数（）{
$（“.wrap”）.toggleClass（'on'）；
});
变量div\u父类\u类\u名称；
var divs_类；
变量id_offset_map={}；
$（文档）.ready（函数（）{
div\u parent\u class\u name=“包裹滚动”；
divs_class=“页面部分”；
var scroll_divs=$（“+div_parent_class_name）.children（）；
id_offset_map.first=0；
滚动每个分区（功能（索引）{
id#offset#map[“#”+scroll_divs[index].id]=scroll_divs[index].offsetTop
});
$（'a'）.bind（'click'，函数（e）{
e、 预防默认值（）；
var target=$（this.attr（“href”）
$（'.wrap_scroll'）.stop（）.animate({
scrollTop:id\u offset\u map[目标]
}，600，函数（）{
/*location.hash=target-20；*///将哈希（#jumptarget）附加到页面URL
});
返回false；
});
});
$（“.wrap_scroll”）.scroll（函数（）{
var scrollPos=$（“.wrap_scroll”）.scrollTop（）；
$（“+divs_类）。每个（函数（i）{
var divs=$（“+”divs_类）；
每个分区（功能（idx）{
if（scrollPos>=id\u offset\u map[“#”+this.id]）{
$（'.menu>ul>li a.active'）.removeClass（'active'）；
$（'.menu>ul>li a'）.eq（idx）.addClass（'active'）；
}
}); 
});
}).scroll（）
body，
html{
保证金：0；
填充：0；
高度：3000px；
}
.wrap{display:none；}
.wrap.on{display:block；}
.菜单{
宽度：100px；
位置：固定；
顶部：40px；
左：10px；
}
.菜单a.激活{
背景：红色
}
.卷轴{
位置：绝对位置；
顶部：20px；
左：150px；
宽度：500px；
高度：500px；
溢出y：滚动
}
#家{
背景色：#286090；
高度：200px；
}
#投资组合{
背景：灰色；
高度：600px；
}
#关于{
背景颜色：蓝色；
高度：800px；
}
#接触{
背景：黄色；
高度：1000px；
}

显示/隐藏





a
嗯
聚丙烯
aa
复写的副本
在CSS中，不要使用
display:none
和
display:block
，而是尝试使用
visible
：

.wrap { visibility:hidden;}
.wrap.on { visibility:visible;}

这将在不影响布局的情况下隐藏图元

更新的fiddle:
当您计算
偏移量时，
div
被
隐藏，显示为：无
。这将导致偏移设置/计算为零

下面是我想出的一个快速解决方案：

基本上，在单击“显示/隐藏”后，移动逻辑以确定偏移量

var setOffset = null;

...

if (!setOffset) {
    var scroll_divs = $("." + div_parent_class_name).children();
    id_offset_map.first = 0;
    scroll_divs.each(function(index) {
        id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
    });
    setOffset = true;
}

问题是当内容被隐藏时，您正试图更新id\u offset\u映射。当您使用“显示：无”道具时，您将无法获取该元素的尺寸，因此它无法工作

我更新了逻辑请检查小提琴


var-id\u-offset\u-map={}；
var div\u parent\u class\u name=“包裹滚动”；
var divs_class=“页面部分”；
var scroll_divs=$（“+div_parent_class_name）.children（）；
函数updateOffsets（）{
id_offset_map.first=0；
滚动每个分区（功能（索引）{
id#offset#map[“#”+scroll_divs[index].id]=scroll_divs[index].offsetTop
});
}
$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
$（“.wrap”）.toggleClass（'on'）；
if（$（“.wrap”）.hasClass（“on”））{
updateOffsets（）；
}
});
$（'a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var target=$（this.attr（“href”）
$（'.wrap_scroll'）.stop（）.animate({
scrollTop:id\u offset\u map[目标]
}，600，函数（）{
/*location.hash=target-20；*///将哈希（#jumptarget）附加到页面URL
});
返回false；
});
});
$（“.wrap_scroll”）.on（'scroll'，function（）{
var scrollPos=$（“.wrap_scroll”）.scrollTop（）；
$（“+divs_类）。每个（函数（i）{
var divs=$（“+”divs_类）；
每个分区（功能（idx）{
if（scrollPos>=id\u offset\u map[“#”+this.id]）{
$（'.menu>ul>li a.active'）.removeClass（'active'）；
$（'.menu>ul>li a'）.eq（idx）.addClass（'active'）；
}
}); 
});
}).scroll（）
body，
html{
保证金：0；
填充：0；
高度：3000px；
}
.wrap{display:none；}
.wrap.on{display:block；}
.菜单{
宽度：100px；
位置：固定；
顶部：40px；
左：10px；
}
.菜单a.激活{
背景：红色；
}
.卷轴{
位置：绝对位置；
顶部：20px；
左：150px；
宽度：500px；
高度：500px；
溢出y：滚动；
}
#家{
背景色：#286090；
高度：200px；
}
#投资组合{
背景：灰色；
高度：600px；
}
#关于{
背景颜色：蓝色；
高度：800px；
}
#接触{
背景：黄色；
高度：1000px；
}

显示/隐藏






嗯
聚丙烯
aa
复写的副本
工作得很好，只是当您使用display:none时，您不能进行偏移计算，因为事实上元素没有渲染，我不确定是否所有的值​​给定0或未定义，我猜未定义，解决方案总是使用函数计算位置：

var div_parent_class_name;
var divs_class;
var id_offset_map = {};
function calcTops(){
    div_parent_class_name = "wrap_scroll";
    divs_class = "page-section"; 
    var scroll_divs = $("." + div_parent_class_name).children();
    id_offset_map.first = 0;
    scroll_divs.each(function(index) {
        id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
    });
}


不是最好的方法，但它是给你一个想法。对不起，我的英语不好。
请检查我设计的这个工作页面


jQuery（document）.on（'scroll'，function（）{
onScroll（）；
});
jQuery（document）.ready（fu