使用jquery面向代码问题创建回到顶部按钮

时间:2017-02-23 10:32:45

标签: javascript jquery html css scrolltop

我的index.php上有固定按钮,当用户位于页面底部时,该按钮可用于返回顶部。

<button id="fixed-btn"></button>

它的css是这样的。

#fixed-btn{
 position: fixed;
    bottom: 50px;
    right: 50px; 
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background-color: red;
 opacity: 0;
}
#fixed-btn.show{
    opacity: 1;
}

这样做我写了jquery

$(document).ready(function()
{
  function testScroll(ev)
  {
    if(window.pageYOffset>400)
    {
      $('#fixed-btn').addClass('show');
    }
    else
    {
      $('#fixed-btn').removeClass('show');
    }
  }
  window.onscroll=testScroll
  $("#fixed-btn").click(function()
  {
    $('html, body').animate(
    {
      scrollTop:0
    }, 1500 );
  });

我不知道为什么它不起作用。按钮不可见。任何人都可以了解它然后请分享。在此先感谢:)

1 个答案:

答案 0 :(得分:0)

我看到你的代码我认为这将解决你的问题。请在下面给出你的css

#fixed-btn{
 position: fixed;
    bottom: 50px;
    right: 50px; 
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background-color: red;
 z-index: 9999;   
 opacity: 0;
}

您只需在此z-index: 9999;

中添加#fixed-btn{..}即可

如果仍然面临问题,请告诉我。