向下滚动后转到首页按钮答案

【问题标题】：Go to top page button after scrolling down向下滚动后转到首页按钮
【发布时间】：2018-12-08 02:38:13
【问题描述】：

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

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

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; 
}

谢谢。

【问题讨论】：

你在代码的什么地方调用了 scrollFunction() ??

标签： javascript html css angular angularjs-directive

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

好答案，我发现的唯一问题是它滚动到主页底部，同时滚动到 sn-p 的顶部。这对某些用例来说不是问题吗？

【解决方案4】：

我看到其他答案基于 jQuery，但我建议您遵循“Angular 方式”。在 Angular 中，您可以通过 (scroll)="handleScroll()" 监听 scroll 事件，并通过 Math.abs(this.scroller.nativeElement.getBoundingClientRect().top) 获取当前偏移量（getBoundingClientRect().top 返回负数，因此我们可以通过 Math.abs 获取绝对值）。最后你应该得到这样的东西：

HTML

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

组件

@ViewChild('scrollWrapper') private scrollWrapper: ElementRef;
@ViewChild('scroller') private scroller: ElementRef;

public showButton: boolean = false;

public handleScroll(): void {
  const offsetTop: number = Math.abs(this.scroller.nativeElement.getBoundingClientRect().top); 
  this.showButton = offsetTop > 5;
}

public scrollToTop(): void {
  this.scrollWrapper.nativeElement.scrollTop = 0;
}

这是一个有效的STACKBLITZ。

【讨论】：

感谢您的最后评论我想要的效果有效......但功能本身现在不起作用？转到页面顶部的角度代码是什么？
由于某种原因我无法完成这项工作.. 这是我的 html:(appComponent):

置顶
因为你必须为你的代码调整它，你所需要的只是检测正确的滚动元素