0
ユーザーがページの一番下までスクロールすると、右下隅にボタンを表示しようとしています。 RailsやChrome Dev Toolsにエラーがあるかどうかを確認しようとしていますが、問題を特定するために何も表示されません。上部のボタンにスクロールして表示されない
これは私がbodyタグの前に、底部のボタンで自分の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;
}
}
はいくつかの助けをお願い申し上げます。ありがとう！