1
私はいくつかの例を見ましたが、私はそれを実装するのに苦労しています。白か黒のどちらかです背景に応じて色を変更してください
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function() {
backToTop();
});
$('#back-to-top').on('click', function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
&:nth-of-type(2n) {
background-color: #FE4B74;
}
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
&:hover {
opacity: 0.8;
}
&:active {
top: 1px;
}
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
}
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 32px;
height: 32px;
text-align: center;
line-height: 30px;
color: #444;
cursor: pointer;
border: 0;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}
#back-to-top:hover {
background: #e9ebec;
}
#back-to-top.show {
opacity: 1;
}
#content {
height: 2000px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href="#" id="back-to-top" title="Back to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<section class="intro">
<div class="content">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section>
<div class="content">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section>
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
</div>
</section>
<footer>
Made by <a href="https://www.twitter.com/ckor">@ckor</a>
</footer>
コード内に何も見つかりません。あなたは[mcve]を作れますか？ –
Cantは実際にこれを処理することができますが、https://jsfiddle.net/syz8xfy5/ –
Zoeは、コード全体を追加するとmanを動作させます。 –