Question

我是一个绝对的新手所以请耐心等待我。我读了很多这里的帖子我认为可能与我的问题有关，但我很难理解所提供的解决方案。

我正在尝试用CSS创建一个点击式水平手风琴。使用Firefox，它工作得很好。 Chrome和Safari中会出现此问题。

问题在于，每次点击链接时，页面都会向下滚动到页面底部，您需要向上滚动以查看整个内容。链接看起来像这样：

 <h2><a href="#accordion1">title1</a></h2>

毋庸置疑，这对用户来说非常烦人。我已经在某个地方读过这个了使用JavaScript preventDefault()可以避免。我该怎么做？有什么其他方法可以防止这种情况发生？

Answer 1

编辑 - 所以似乎preventDefault（）取消了所有默认行为（实际上是有意义的） - 我提出的第一个解决方案根本不是解决方案。

所以，这实际上证明很难做到。

经过一些搜索，我得出的结论是，在不取消链接默认行为的情况下取消滚动是不可能的（因此.preventDefault()中的默认值）。

您可以做的是滚动回到链接滚动完成后的位置，但即使您尽可能快地执行此操作，您仍然可以看到浏览器上的滚动内容 - 所以这是一个丑陋的解决方案。（无论如何你可以在这里看到它 - http://jsfiddle.net/joplomacedo/RpDyc/）。

那么，替代品呢？因为当你这样做（我假设你在这里使用：target伪类）你仍然需要javascript，然后忘记：目标的东西，并依靠单独的JavaScript。它更简单，更清洁，更少'hacky'。

我是怎么做的（jquery） - ＆gt; http://jsfiddle.net/joplomacedo/AfzJY/

如果你坚持用CSS做，那么我建议你做这个，因为Chris Coyier建议here不要利用：target但是：checked。我不会在这里进一步发展，因为他的文章做得很好。

编辑前

你在使用jquery吗？如果是这样，你只需要这个：

$('a[href="#accordion1"]').on('click', function (e) {
   e.preventDefault();
});

如果您不使用jquery，那么这里是如何使用纯javascript：

var cancels_links = document.getElementsByClassName('cancels-link');

var cancel = function cancel(e) {
    e.preventDefault();
};

for (var i = 0, max = cancels_links.length; i < max; i++) {
    cancels_links[i].addEventListener('click', cancel, false );
}

...这个要求您将class="cancels-link"添加到您要取消的默认行为的每个'a'元素。

这是两个解决方案的小提琴 - ＆gt; http://jsfiddle.net/cBQnv/3/

水平折叠链接在单击时向下滚动页面到底部

1 个答案: