scss 滚动时的UI到顶部/页面到顶部按钮

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 滚动时的UI到顶部/页面到顶部按钮相关的知识，希望对你有一定的参考价值。

/* PAGE TOP BUTTON ON SCROLL
------------------------------------------------------------------------------*/

$(function() {
    $(document).on('click', 'a#page-top', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 80
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

(function ($) {
    $(document).ready(function(){ 
 
        // // fade in button after scroll
        $(function () { 
            $(window).scroll(function () {
                // set distance user needs to scroll before we fadeIn button
                if ($(this).scrollTop() > 600) {
                    $('#page-top').fadeIn();
                } else {
                    $('#page-top').fadeOut();
                }
            });
        });
    });
}(jQuery));
  
  <a href="#top" id="page-top">
    <span class="sr-only">Go to top</span>
    <i class="fa fa-angle-up"></i>
  </a>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Easing -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <!-- Custom JS -->
  <script src="assets/js/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>

  <head> <!-- Content here --> </head>
  <body id="top">

#page-top {
  background: #383838;
  color: white;
  position: fixed;
  z-index: 100;
  bottom: 2rem;
  right: 2rem;
  padding: 0.5rem 1.25rem;
  border-radius: 7px;
  display: none;
  &:hover,
  &:focus,
  &:active,
  &:target {
    background: #787878;
  }
  .fa {
    font-size: 3rem;
    position: relative;
    top: -1px;
  }
}

以上是关于scss 滚动时的UI到顶部/页面到顶部按钮的主要内容，如果未能解决你的问题，请参考以下文章

如何使我的滚动到顶部按钮动画流畅

scss 滚动到顶部样式表

js-点击按钮页面滚动到顶部，底部，指定位置

Angular ui-router 滚动到顶部，而不是 ui-view

再次滚动到顶部时的 TwoWayView 空白问题

单击单选按钮或复选框时表单滚动到顶部