每当用户向下滚动到页面底部时，我试图在右下角显示一个按钮。我正在尝试查看 Rails 或 Chrome 开发工具中是否有任何错误，但没有显示任何内容来识别问题。
这就是我的 application.tml.erb 按钮位于 body 标签之前的底部:
<!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;
}
}
希望得到一些帮助。谢谢!
最佳答案
您的函数调用方式不对请添加此条件
$(window).scroll(function() {
show_hide_scroll_top();
});
祝你好运
关于javascript - 滚动到顶部按钮不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44796202/