Back to Top button causing a tag cannot click

Question

I'm developing website that allow user to click Back to Top when they scroll to bottom. I use jQuery, It worked well. However, it has a problem with link (a tag). All the link that locate on the same navigator position with Back to Top button will not able to click. Other links beside that position can click normally.

Here is jQuery code

$(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>

Can anyone know the problem that causing link (a tag) cannot be cliked?

Thank in advance.

Answer 1

This code is working fine, however the first function you have is detecting that the scrolltop is less than 200 and hiding the link at the bottom.

If you comment out this function as i have done in the demo below it will work fine.

Demo: 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

Your css should be:

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

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

see Demo

Answer 3

I guess it is because your "p" element has a 100% width (as a block element) and you specify a big z-index for it (or place it after other "a" tags), so it covers other elements on this line (including "a" tag) and you cannot click those elements.

You can give the "p" (or even its parent node) a visible attribute (background, border, etc) to detect if above situation happens. If so, you can just change the width of the block element to make it will not overlap with other elements.