javascript jQuery_SmoothScroll

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript jQuery_SmoothScroll相关的知识，希望对你有一定的参考价值。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width">
    <!--<link rel="stylesheet" href="normalize.css">-->
    <link rel="stylesheet" href="main.css">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  </head>
  <body>
    <!-- TEST -->
    <div style="background-color:#eee;height: 2200px;"></div>
    <!-- TopButton -->
    <div id="top-btn" class="top-btn"><a href="#top"><i class="fas fa-caret-square-up"></i></a></div>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  </body>
</html>
@charset "utf-8";
/* --------------------------------
 * BASE
 * -------------------------------- */
html {
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.2rem;
  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}

a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}
ul {
  list-style-type: none;
}

/* --------------------------------
 * PARTS
 * -------------------------------- */
 
/* TOP BUTTON */
.top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
}
.top-btn a {
  opacity: 0.5;
  font-size: 4rem;
}
.top-btn a:hover {
  opacity: 0.8;
}

/* --------------------------------
 * HEADER
 * -------------------------------- */
 
 /* --------------------------------
 * MAIN
 * -------------------------------- */
 
 /* --------------------------------
 * FOOTER
 * -------------------------------- */
$(function(){
var topBtn = $('#top-btn');
topBtn.hide();

//ボタン表示設定
$(window).scroll(function(){
  if($(this).scrollTop() > 80){ // 80px以上スクロールしたら
    topBtn.fadeIn();
  } else {
    topBtn.fadeOut();
  } 
});

// ボタンクリックイベント
topBtn.click(function(){
  $('html, body').animate({
  scrollTop: 0
  }, 500); // 500ms
  return false;
});

});

以上是关于javascript jQuery_SmoothScroll的主要内容，如果未能解决你的问题，请参考以下文章

javascript JavaScript isset（）等效： - JavaScript

JavaScript 使用JavaScript更改CSS（JavaScript）

JavaScript之基础-1 JavaScript(概述基础语法)

前端基础-JavaScript的基本概述和语法

JavaScript

JavaScript