Javascript 滚动至顶部按钮不显示
每当用户向下滚动到页面底部时,我试图在右下角显示一个按钮。我正在尝试查看Rails或Chrome开发工具中是否存在任何错误,但没有显示任何内容来确定问题 这就是我的Javascript 滚动至顶部按钮不显示,javascript,jquery,html,css,ruby-on-rails,Javascript,Jquery,Html,Css,Ruby On Rails,每当用户向下滚动到页面底部时,我试图在右下角显示一个按钮。我正在尝试查看Rails或Chrome开发工具中是否存在任何错误,但没有显示任何内容来确定问题 这就是我的应用程序.tml.erb的设置方式,按钮位于body标签前的底部: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
应用程序.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>
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();
#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;
}
}
和我的应用程序.css.scss
:
// 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();
#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();
});
祝你好运