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

此代码工作正常，但是您的第一个功能是检测到scrolltop小于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;
}

请参阅Demo

Answer 3

我想这是因为你的“p”元素有100％的宽度（作为一个块元素），你为它指定一个大的z-index（或者把它放在其他“a”标签之后），所以它涵盖其他此行上的元素（包括“a”标签），您无法单击这些元素。

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

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

3 个答案: