0

我正在开发允许用户在滚动到底部时单击返回顶部的网站。我使用 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>

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

预先感谢。

4

3 回答 3

0

你的CSS应该是：

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

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

见演示

于 2013-09-09T02:49:26.677 回答
0

我猜这是因为您的“p”元素具有 100% 的宽度（作为块元素）并且您为它指定了一个大的 z-index（或将它放在其他“a”标签之后），所以它涵盖了其他元素行（包括“a”标签），您不能单击这些元素。

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

于 2013-09-09T02:54:16.473 回答
0

此代码工作正常，但是您拥有的第一个功能是检测到滚动顶部小于 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;
});
});
于 2013-09-09T02:36:11.473 回答