{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 beautiful° 的问题《Smooth scrolling within element, only first link/a》','https://www.manongdao.com/q-828802.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am having an issue getting smooth scrolling to work within an overflowed element. The first link/anchor works as expected, but any subsequent links do not scroll to their anchor.
Fiddle: http://jsfiddle.net/BPyVd/1/
<!doctype html>
<html>
<head>
<style>
#container {width: 400px; height: 400px; background: #ccc; overflow-y: scroll}
div > div {margin-top: 500px; height: 1px; background: red;}
</style>
</head>
<body>
<div id="container">
<a href="#anchor-a">NEXT</a>
<div id="anchor-a"></div>
<a href="#anchor-b">NEXT</a>
<div id="anchor-b"></div>
<a href="#anchor-c">NEXT</a>
<div id="anchor-c"></div>
</div>
<script>
$(function() {
$('a').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('#container').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
Any help would be more than appreciated. Thank you.
Fixed Script :