Question

我创建了一个方法，每次单击它都会转到页面顶部。问题是，我希望仅当您已经向下滚动时才显示此按钮，而不仅仅是默认设置。我该如何定义？这是我的代码：

显示/隐藏按钮-不起作用：

scrollFunction() {
    if (document.body.scrollTop > 5 || document.documentElement.scrollTop >5) {
        document.getElementById("myBtn").style.display =  "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

滚动到顶部-有效：

topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; 
}

谢谢。

Answer 1

我使用此代码，只需更改CSS即可满足您的需求。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#scroll').fadeIn();
    } else {
      $('#scroll').fadeOut();
    }
  });
  $('#scroll').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 600);
    return false;
  });
});

#scroll {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  text-indent: -9999px;
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#scroll span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-bottom-color: #ffffff
}

#scroll:hover {
  background-color: #e74c3c;
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

  <!-- BackToTop Button -->
  <a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span> </span></a>

  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  
</body>

Answer 2

请尝试以下示例进行平滑过渡：

$(document).scroll(function() {

  if ($(this).scrollTop() >= 20) {


    $('#return-to-top').fadeIn(200);
  } else {


    $('#return-to-top').fadeOut(200);
  }

});

$('#return-to-top').click(function() {
  $('body,html').animate({
    scrollTop: 0
  }, 500, 'swing');
});

#return-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #777;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  font-size: 19px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div style="height:700px">
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
  <p>Example text</p>
</div>
<a href="javascript:" id="return-to-top" class="btn btn-secondary">
  <i class="fa fa-angle-up"></i>
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Answer 3

您可以滚动到顶部按钮，如下例所示：

$(document).ready(function() {
  $('#autoScrl').hide();
  $("div").scroll(function() {
    $('#autoScrl').show();
  });


});

function goToTop() {
  document.getElementById('top').scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'nearest'
  });
  setTimeout(function() {
    $('#autoScrl').hide();
  }, 1000);;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>

  <p>Try the scrollbar in the div</p>

  <div id='hhhh' style="border:1px solid black;width:400px;height:100px;overflow:scroll;">
    <section id="top">
      <!-- your content -->
    </section>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' vulnerable years my father gave me some advice that I've been turning over in my mind ever
    since.
    <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  </div>

  <button id='autoScrl' onclick='goToTop()'>Go To Top</button>
</body>

</html>

Answer 4

我看到其他答案都基于jQuery，但是我建议您遵循“角度方式”。在Angular中，您可以通过scroll收听(scroll)="handleScroll()"事件，并通过Math.abs(this.scroller.nativeElement.getBoundingClientRect().top)获取当前的顶部偏移量（getBoundingClientRect().top返回负数，因此我们可以通过{{1 }}）。最终，您应该得到如下内容：

HTML

Math.abs

组件

<div class="wrapper" (scroll)="handleScroll()" #scrollWrapper>
  <div class="scroll" #scroller></div>
</div>
<button *ngIf="showButton" (click)="scrollToTop()">To top</button>

这是工作中的STACKBLITZ。

向下滚动后转到首页按钮

4 个答案: