返回顶部导致标签无法单击的按钮

Question

我正在开发一个允许用户在滚动到底部时单击“ 返回顶部”的网站。 我使用jQuery，效果很好。 但是，链接（标签）有问题。 使用“返回首页”按钮位于同一导航器位置的所有链接将无法单击。 该位置旁边的其他链接可以正常单击。

这是jQuery代码

$(function () {
$(window).scroll(function () {
  if ($(this).scrollTop() > 200) {
    $('#back-top').fadeIn();
  } else {
    $('#back-top').fadeOut();
  }
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
  scrollTop: 0 }, 800);
  return false;
});
});

PHP + HTML

<?php
echo "<td align='center'>
echo "<a href='edit_request.php?edit=$row[Req_ID]'>Edit</a> | <a href='action.php?delete=$row[Req_ID]'>Delete</a>";
echo "</td>";
?>

<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>

谁能知道导致链接（标签）无法被点击的问题吗？

预先感谢。

Answer 1

该代码可以正常工作，但是您拥有的第一个功能是检测滚动顶小于200，并将链接隐藏在底部。

如果像我在下面的演示中所做的那样注释掉此功能，它将正常工作。

演示： http ： //jsfiddle.net/WzrLM/

$(function () {
/*
 $(window).scroll(function () {
    console.log($(this).scrollTop());
    if ($(this).scrollTop() > 200) {
    $('#back-top').fadeIn();
  } else {
    $('#back-top').fadeOut();
  }
});
   */

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
  scrollTop: 0 }, 800);
  return false;
});
});

Answer 2

您的CSS应该是：

#back-top {
    position: fixed;
    bottom: 30px;
}

#back-top a {
    width: 100px;
    display: block;
    text-align: center;
}

见演示

Answer 3

我猜这是因为您的“ p”元素具有100％的宽度（作为块元素），并且为其指定了较大的z-index（或将其放置在其他“ a”标签之后），因此它涵盖了此元素上的其他元素行（包括“ a”标签），则无法单击这些元素。

您可以给“ p”（甚至它的父节点）一个可见属性（背景，边框等），以检测是否发生上述情况。 如果是这样，您可以仅更改块元素的宽度以使其不会与其他元素重叠。