Question

每当用户向下滚动到页面底部时，我都会尝试在右下角显示一个按钮。我正在尝试查看Rails或Chrome开发者工具中是否有任何错误，但没有任何错误显示以确定问题。

这就是我的 application.tml.erb 与身体标记前面底部按钮的方式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
  <meta name="keywords" content="">
  <meta name="description" content="">

  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:400,400i" rel="stylesheet">

  <%= csrf_meta_tags %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>

  <div id="main container">

    <%= render 'layouts/navbar' %>

    <%= yield %>

  </div><!-- MAIN CONTAINER -->

  <!-- SCROLL UP -->
  <a id="scroll-up" class="waves"><i class="fa fa-angle-up"></i></a> 
  <!-- THIS IS WHERE I ADDED THE SCROLL UP BUTTON -->

</body>
</html>

我也尝试添加content_tag但仍然没有成功：

<% content_tag :a, :id => "scroll-up", :class => "waves" do %>
    <i class="fa fa-angle-up"></i>
<% end %>

application.js ：

// SHOW/HIDE SCROLL UP
    function show_hide_scroll_top() {

        if ($(window).scrollTop() > $(window).height()/2) {
            $("#scroll-up").fadeIn(300);
        } else {
            $("#scroll-up").fadeOut(300);
        }

    }


    // SCROLL UP
    function scroll_up() {              

        $("#scroll-up").on("click", function() {
            $("html, body").animate({
                scrollTop: 0
            }, 800);
            return false;
        });

    }

    // SHOW/HIDE SCROLL UP
    show_hide_scroll_top();


    // SCROLL UP
    scroll_up();

我的 application.css.scss ：

#scroll-up {
    position: fixed;
    z-index: 8030;
    bottom: 50px;
    right: 50px;
    display: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #19496e;
    color: #fff;
    font-size: 24px;
    line-height: 42px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

#scroll-up:hover {
    background-color: #94ccdf;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 12px 0 rgba(0, 0, 0, 0.12);
}

#scroll-up.waves .waves-ripple {
    background-color: #c6e6f1;
}

@media (max-width: 767px) {

    #scroll-up {
        right: 20px;
        bottom: 20px;
    }

}

会感激一些帮助。谢谢！

Answer 1

您的函数调用方法不正确请添加此条件

\end{align} ($' post check)

祝你好运

滚动到顶部按钮不显示

1 个答案: