我正在使用< a href>元素以及:target css选择器显示< div>默认设置为display:none.问题是,当我点击链接显示< div>时,它会自动向我的网站滚动到< div>.
有没有办法阻止屏幕移动?
不幸的是,除了CSS和HTML之外,我还没有精通任何东西.
解决方法
这有点像黑客,但你可以使用基本的CSS工作:
#div1 { height: 0; overflow:hidden; } #div1:target { height: auto; margin-top: -110px; padding-top: 110px; } #div2 { background:red; } <a href="#div1">Click to show</a> <div id="div1"> <div id="div2">Content</div> </div>
如果你需要它更灵活一点,你可以添加一些js …
$('a').click(function () { $('#div1').css({ 'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),'padding-top': $('#div1').position().top - $(window).scrollTop() }); });
基本上你是用负边距向上拉div1的顶部,然后用填充向下推div2,这样div1的顶部就在窗口的顶部…就像我说它是一个黑客,但它确实特技.