我在滚动到锚点时遇到麻烦。我有3个问题:
当我在两个面板上时,我单击指向其中一个面板的链接。什么都没发生。
例如,当我在D上并单击C时,它将转到C的末尾。
当我添加任何jQuery或JavaScript这样滚动到哈希
function scrollTo(hash) { location.hash = "#" + hash; }
它似乎不起作用。
无论用户在何处,我都希望该链接转到div的开头(div的最左侧)。
我有一个这样的页面:
<ul class="links">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
</ul>
<div class="panels">
<div class="panel" id="a">I'am A</div>
<div class="panel" id="b">I'am B</div>
<div class="panel" id="c"><span class="stupid-long-content">I'am C (very long)</span></div>
<div class="panel" id="d">I'am D</div>
</div>
每个div是通过css达到的屏幕大小,如下所示:
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height:100%;
}
body
{
margin:0;
padding:0;
}
.panels
{
white-space: nowrap;
height: inherit;
}
.panel
{
height: inherit;
font-size: 20px;
text-align: center;
padding: 60px;
display: inline-block;
min-width: 100%;
}
.stupid-long-content
{
width: 3000px;
display: block;
}
您可以使用jQuery scrollLeft函数并阻止默认的浏览器处理:
$('.links a').click(function(e) {
e.preventDefault();
if (this.hash)
$('body, html').scrollLeft($(this.hash).offset().left);
});
这是更新的小提琴。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句