常連

### 実現したいこと
・テーブルの上の行と左の列を固定してスクロールさせる
・スクロール時の挙動に問題がないこと


### 発生している問題・エラーメッセージ
HTMLとCSSでスクロールできるテーブルを作成しているのですが、「住所」の一列だけスクロール中にヘッダーの右の枠線が消えてしまいます。（データセルの枠線は消えません。）

一番左の固定列の幅を超える幅を設定すると消えてしまうようなのですが、いろいろ試しても直すことができず、、、。

■スクロール中　ボーダーが消える前
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-04/a95c587e-69f5-4b78-9d38-9b648028a50d.jpeg)


■ボーダーが消えた後（担当者名の左のボーダー）
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-04/bd785264-2c97-4108-9ac9-6f50e8161150.jpeg)
### 該当のソースコード
```HTML
            <div class="data_tbl">
                <table>
                    <tr>
                        <th class="column1">企業団体名</th>
                        <th class="column2">代表アカウント<br>フラグ</th>
                        <th class="column3">郵便番号</th>
                        <th class="column4">住所</th>
                        <th class="column5">担当者名</th>
                        <th class="column6">部署</th>
                        <th class="column7">役職</th>
                        <th class="column8">メールアドレス</th>
                        <th class="column9">電話番号</th>
                        <th class="column10">連絡先</th>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                </table>
            </div>
```

```CSS
.data_tbl{
    overflow: auto;
    width: 100%;
    height: 500px;
}

.data_tbl table{
    margin: 0;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: separate;
    width: 1000px;
}

.data_tbl td{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background: #FFF;
    padding: 5px;
}

.data_tbl th{
    white-space: nowrap;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background: #f2f2f2;
    position: sticky;
    top: 0;
    left: 0;
}

.data_tbl tr:first-child th{
    border-top: 1px solid #999;
}

.data_tbl th:first-child{
    border-left: 1px solid #999;
}

.data_tbl tr:first-child th:first-child{
    z-index: 1;
}

.column1 {
    width: 250px;
}

.column2 {
    width: 120px;
}

.column3 {
    width: 90px;
}

.column4 {
    width: 260px;
}

.column5 {
    width: 130px;
}

.column6 {
    width: 130px;
}

.column7 {
    width: 130px;
}

.column8 {
    width: 250px;
}

.column9 {
    width: 130px;
}

.column10 {
    width: 150px;
}
```
### 試したこと

「border-collapse: separate;」をtableのcssに追記しても挙動は変わりませんでした。




stickyで行と列を固定したテーブルのヘッダーのボーダーが一部消える

### 実現したいこと
Unity2Dで写真のような動きをする敵を作りたいです。
下のコードは主に左右移動しながら波のように移動して、左側に行ったら右、右側に行ったら左に行くようなループをする挙動になっています。
しかし、この写真のように波のように上下移動をして、一定の上のところまで行ったら下、一定の下のところまで行ったら上というような挙動は上手くできませんでした。
もし、何か詳しい人がいたら教えていただければ幸いです。

### 発生している問題・分からないこと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-25/1efca66b-b4c6-4da6-9f83-67aec5c0dd49.png)



### 該当のソースコード

```WaverScript
public class WaverScript : MonoBehaviour
{
    private Vector3 enemypos;
    public float A = 1.0f;
    public float B = 4.0f;
    // Start is called before the first frame update
    void Start()
    {
        Application.targetFrameRate = 60;
        enemypos = transform.position;
    }

    // Update is called once per frame
    void Update()
    {
        transform.position = new Vector3(Mathf.Sin(A * Time.time) * 5.0f + enemypos.x, Mathf.Cos(B * Time.time) * 2.5f + enemypos.y, enemypos.z);
    }

   

}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
x軸とｙ軸のCosとSinを色々組み替えて見ましたが、写真のような動きにはなりませんでした。

### 補足
https://teratail.com/questions/372012
ちなみにこのコードは同サイトのこのリンクの回答者から拾ったコードです。

Unity2Dで波のように上下移動する敵を作りたい。

お世話さまです。皆さまのお知恵を貸して頂きたく、お願い致します。
画面描画について教えて頂きたいと思っています。
画面描画につていは、初心者すぎてしまい、色々と調べましたがわかりませんでした。

☆環境☆
Windows10 64bit
Visual Studio2017
C# (.Net 4.7.2)

☆実現したいこと☆
Panelの内容をボタン押下、スクロールバー操作によって、スクロールさせたい。

☆質問事項☆
PanelでのAutoScrollの制御です。
フォーム上にPanelを一つとボタン２つを配置し、Panleには塗りつぶした四角形をPanelの右端から左端にかけて10個描画します。
初期表示状態ではスクロールバーも一番右端に表示するようにしておきます。
ボタン１を押すとPanelの内容とスクロールバーが右へスクロールし、ボタン２を押すとPanelの内容とスクロールバーが左へスクロールするようにしたいのですが、スクロールバーとスクロール時のPanelの再描画をどのように行ったら良いのかわかりません。
ボタンのクリックイベント内でスクロール処理を行うのでしょうか？

☆初期表示イメージ☆
![イメージ説明](d762b76a879f9d23e58cfc641aa72a40.jpeg)


☆ソースコード☆
```C#
using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        int horScrollValue = 0;
        int verScrollValue = 0;

        bool isFirstTime = true;

        public Form1()
        {
            InitializeComponent();
            
        }

        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            panel1.AutoScroll = true;
            panel1.AutoScrollMinSize = new Size(25 * 10, 25 * 0);

            if(isFirstTime)
            {
                panel1.HorizontalScroll.Value = HorizontalScroll.Maximum;
                isFirstTime = false;
            }
            

            Graphics g = panel1.CreateGraphics();
            g.Clear(SystemColors.Control);

            for (int i = 0; i < 10; i++)
            {
                g.FillRectangle(Brushes.DeepSkyBlue,
                    panel1.ClientSize.Width - 20 + horScrollValue - (i * 25),
                    panel1.ClientSize.Height - 20 + verScrollValue,
                    20,
                    20);
            }
        }

        private void button1_Click(object sender, EventArgs e)
        {
　　　　　　　// 右へスクロールする処理を記述
        }

        private void button2_Click(object sender, EventArgs e)
        {
            // 左へスクロールする処理を記述
        }
    }
}

```

C# Panelでのスクロールバー制御

### 前提・実現したいこと

Wordpressで自作のテーマを使用しサイトを運営しています。

### 発生している問題・エラーメッセージ

MacのChromeでサイトを見ると、スクロールバーが二重になって表示されることがあります。
常に二重表示されているわけではなく、マウスのホイールを転がしていると時々二重になって表示され、下までスクロールされない(本来必要ないスクロールバーに邪魔される)現象が起きております。

![問題発生時の画面](682ebf19da0823d5320699cfb4627f77.gif)
※画面はローカル環境のものなので現在公開中のサイトとは少々デザインや色が異なりますが同じ問題が生じています。

### 該当のソースコード

原因が不明ですがおそらくcssの問題かと思われます。
https://studio-pi.jp/
↑わたしのサイトです。
再現方法もわかっておらず、マウスホイールを転がしていると時々発生します。

### 試したこと

『Chrome　スクロールバー　二重』などの検索ワードで調べたところ、スタイルシートにoverflow-x:hidden;と記載されているとIEで再現できるとの情報がいくつか見つかりました。
しかし、overflow-x:hidden;は使用していないのと、IEではなくChromeで問題が発生しております。

ブラウザのデベロッパーツールでcssを修正してみたり、削除したりなど試みましたが解決に至りませんでした。

### 補足情報（FW/ツールのバージョンなど）

トップページの記事一覧画面、記事詳細、固定ページなどどこのページでも再現します。
サイトをご覧の上ご教示いただけないでしょうか。

よろしくお願いいたします。

Chromeでスクロールバーが二重に表示されてしまう

モーダルウィンドウが表示されたとき、画面に収まらなかった場合、スクロールできるようにしたいです。
id="modal"にoverflow:auto;　または、 overflow:scroll;　をつけてみたのですが、ダメでした。
アドバイス頂けないでしょうか。
宜しくお願い致します。

```HTML
<div id="mask" class="hidden"></div>

<section id="modal" class="hidden">
  <div class="modal">
    <img src="/img/closebtn.svg" class="modal_close">
    <div class="modal_inner">
      <h1>プライバシーポリシー</h1>
      <hr class="privacy_policy">
      <div class="modal_text">
        <h2>ほにゃらら</h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="modal_text">
        <h2>ほにゃらら</h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="modal_close" id="closebtn_under">閉じる</div>
    </div>
  </div>
</section>
```

```CSS
 .modal {
  position: relative;
}

.modal img {
  width: 43px;
  height: 43px;
  position: absolute;
  top: -43px;
  right: -43px;
  z-index: 500;
}

.modal img:hover {
  cursor: pointer;
  opacity: 0.9;
}

#mask {
  background: #0000004D;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 300;
}                                   

#mask.hidden {
  display: none;
}

#modal {
  background: #fff;
  width: 930px;
  padding: 20px;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: 0.5s;
  z-index: 400;
  box-shadow: 0px 0px 3px #00000029;
}

#modal.hidden {
  transform: translateY(-200%);
}

.modal_inner {
  width: 817.5px;
  margin: 0 auto;
}

.modal_inner h1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 65px;
  padding-bottom: 24.5px;
  font-size: 24px;
  line-height: 39px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
  color: #707070;
}

.privacy_policy {
  text-align: center;
  border: solid 2px #3F51B5;
  width: 155px;
  margin-top:0 ;
  margin-bottom: 48.5px;
}

.modal_text {
  margin-bottom: 30px;
}

.modal_text h2 {
  font-size: 20px;
  line-height: 32px;
  padding-left: 27.5px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
  color: #707070;
  border-left: 3px solid #3F51B5;
}

.modal_text p {
  font-size: 16px;
  line-height: 26px;
  padding-left: 27.5px;
  padding-bottom: 26px;
  font-family: 'Noto Sans JP';
  color: #707070;
}

#closebtn_under {
  margin: 0 auto;
  width: 180px;
  padding: 9px 0 8px 0;
  font-size: 16px;
  line-height: 26px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: #3F51B5;
  color: #FFF;
  border-radius: 12px;
  box-shadow: 0px 3px 6px #00000029;
  margin-bottom: 20px;
}
```

```JQuery
$(function(){
    $('#modal_open').on('click',function(){
        $('#modal').removeClass('hidden');
        $('#mask').removeClass('hidden');
        $('body').css('overflow','hidden');
        
    });
    $('.modal_close').on('click',function(){
        $('#modal').addClass('hidden');
        $('#mask').addClass('hidden');
        $('body').css('overflow','auto');
    });
    $('#mask').on('click',function(){
        $('#modal').addClass('hidden');
        $('#mask').addClass('hidden');
        $('body').css('overflow','auto');
    });
});
```

モーダルウィンドウをスクロールできるようにしたいです。

お世話になります。
はじめて質問させていただきます。
javascriptについては、WEB上のサンプルを使って組み合わせたり、検索でこちらにたどり着いて参考にさせていただいたりと、
自作まではできないレベルの者です。

### 実現したいこと

今更なのですが、、jqueryで動きを付けたページを作っておりまして、
タッチデバイスでのスクロールの動作を解決したくアドバイスをいただけたらと思います。
(プラグインは使っていません)

-------

ソースコード(もしくはCode Pen)を確認いただくと、
contents3まではマウスホイール操作でコンテンツごとにスクロールするようになっています。
（わかりやすい例ですとScrollify.jsのような動作）
contents4、contents5、contents6では通常スクロールします。ページトップから下方向へ順に移動する場合は、PCでもタッチデバイスでも正常に動作しています。







### 発生している問題・エラーメッセージ

しかし、タッチデバイスで、ページトップ(contents1)から順に下方向へ移動していき、contents4、contents5、contents6のどれかに達してから上方向へスクロールしていき、
再度ページトップ(contents1)から下方向へスクロールしようとすると、contents2へ移動せず、contents5や、contents6へ移動してしまいます。

タッチスクロールが有効になる条件と無効になる条件（が問題だと思っています）が、
それをどのように組み合わせればよいかわかりかねております。

ここからの修正が大きなものになってしまうのであれば
自分にはそこまでの対応がもう難しいと思っております。
厚かましいかとは思いますが修正案をコードをご教示いただければ大変助かります。


### 該当のソースコード

Code Pen
https://codepen.io/mphzyvet-the-sans/pen/vYbGLbq


```ここに言語名を入力
<style>
.section{
  height:100vh;
}
.contents1{
  background:#ff8080;
}
.contents2{
  background:#ff80c0;
}
.contents3{
  background:#8080ff;
}
.contents4{
  background:#c0c0c0;
  height:800px;
}
.contents5{
  background:#70df00;
  height:700px;
}
.contents6{
  background:#5badff;
  height:600px;
}
</style>

<div class="section contents1">

コンテンツ1

</div>
<div class="section contents2">

コンテンツ2

</div>
<div class="section contents3">

コンテンツ3

</div>
<div class="section contents4">

コンテンツ4(通常スクロール)

</div>
<div class="section contents5">

コンテンツ5(通常スクロール)

</div>
<div class="section contents6">

コンテンツ6(通常スクロール)

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    var sections = $(".section");
    var isAnimating = false;
    var numSections = sections.length;
    var currentSection = 0;
    var scrollEnabled = true;
    var touchScrollEnabled = true;
    var startY = 0;
    var endY = 0;
    var scrollThreshold = 15; // スクロールとタッチスクロールのしきい値(px);

    function scrollToSection(sectionIndex) {
        if (sectionIndex < 0) sectionIndex = 0;
        if (sectionIndex >= numSections) sectionIndex = numSections - 1;

        isAnimating = true;
        $("html, body").animate(
            {
                scrollTop: sections.eq(sectionIndex).offset().top,
            },
            2000,
            function () {
                isAnimating = false;
            }
        );
        currentSection = sectionIndex;
    }

    // ホイールスクロールのイベントハンドラを定義
    function handleWheelScroll(e) {
        if (isAnimating || !scrollEnabled) return;
        e.preventDefault();

        if (e.originalEvent.deltaY > scrollThreshold) {
            if (currentSection < numSections - 1) {
                scrollToSection(currentSection + 1);
            }
        } else if (e.originalEvent.deltaY < -scrollThreshold) {
            if (currentSection > 0) {
                scrollToSection(currentSection - 1);
            }
        }
    }

    // ホイールスクロールのイベントを最初に有効化
    $(window).on("wheel", handleWheelScroll);

    // タッチデバイス用にタッチイベントを処理
    var touchStartY = 0;

    $(document).on("touchstart", function (e) {
        touchStartY = e.originalEvent.touches[0].clientY;
    });

    $(document).on("touchmove", function (e) {
        if (isAnimating || !touchScrollEnabled) return;

        var deltaY = e.originalEvent.touches[0].clientY - touchStartY;

        if (deltaY > scrollThreshold) {
            if (currentSection > 0) {
                scrollToSection(currentSection - 1);
            }
        } else if (deltaY < -scrollThreshold) {
            if (currentSection < numSections - 1) {
                scrollToSection(currentSection + 1);
            }
        }
    });


    // スクロールがcontents3を超えたらホイールスクロールとタッチスクロールのイベントを無効化
    $(window).on("scroll", function () {
        var windowScrollTop = $(window).scrollTop();
        var contents3Top = sections.eq(2).offset().top;
        if (windowScrollTop > contents3Top) {
            scrollEnabled = false;
            touchScrollEnabled = false;
        } else {
            scrollEnabled = true;
            touchScrollEnabled = true;
        }
    });


    scrollToSection(0);


});
</script>
```




タッチデバイスでのスクロール判定

### 前提・実現したいこと
Bootstrapを使用しています。
ナビゲーションバーを固定してページをスクロールさせたいのです。
### 発生している問題・エラーメッセージ
ナビゲーションバーの固定はできたのですが、スクロールができず下の方の画面を表示させることができません。
ナビゲーションバーをクリックすれば、下の方の画面も表示させられます。

### 該当のソースコード

```HTML

 <!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <title>Hello, world!</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body data-spy="scroll" data-target="#navbarResponsive">

    
 <div id="home">
    
    
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="index.html"><img src="img/logo1.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#course">Course</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#team">Team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>

    
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            
            <div class="carousel-item active" style="background-image:url(img/slide0.jpg);">
                <div class="carousel-caption text-center">
                    <h1>Welcome To NUno</h1>
                    <h3>Animated Bootstrap Theme</h3>
                    <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a>
                </div>
            </div>
            
            <div class="carousel-item" style="background-image:url(img/slide1.jpg);"></div>
            
            <div class="carousel-item" style="background-image:url(img/slide2.jpg);"></div>
        </div>
        
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aeia-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aeia-hidden="true"></span>
        </a>
     </div>
     
 </div>
    


    
     <div id="course"　class="offset">

     <div class="col-12 narrow text-center">
        <h1>Nuno THeme Advanced</h1>
        <p class="lead">Learn Bootstrap by creating an advanced Bootstrap4 Responsive website template from scratch, widh no step slipped</p>
        <a class="btn btn-secondary btn-md" href="http://bit.ly/
        advanced-bootstrap-course" target="_blank">93%　OFF COUPON "NUN093"</a>
     </div>
        
    </div>
    
    

    
     <div id="portfolio">
     
    </div>
    


     
     <div id="team">
        
    </div>
    


     
     <div id="contact">
        
    </div>
    
    

    
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
```
```CSS

body{
    overflow: hidden;
    color: #505962;
    font-family: 'Noto Sans JP', sans-serif;
}

/*--- navbar ---*/

.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
}

.navbar-brand img {
    height: 3rem;
}

.navbar-nav li {
    padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #1ebba3;
}

/*---slider---*/

.carousel-item {
    height: 100vh;
}
```
### 試したこと

スペルミスを疑ったのですが、どうやらスペルは合ってるみたいです。

ページをスクロールできない

javascript スクロールについての質問です。
スクロール位置が150pxになったら右下にトップへ戻るボタンが表示し、(フィードイン)トップへ戻るボタンを押すとスクロール位置が0に戻る。(この時トップへ戻るボタンも徐々にフィードアウトする)

どのようにコードを入力すればいいでしょうか？

<body>には
<div id="wrapper"><h1>スクロールイベント</h1><div class="box">box
</div><div id ="page-top">トップへ戻る</div></div><script>function pagetop() {

}

function fadeAnimation(flg) ｛

｝

と書かれてあり、追加でコードを記入したいです。


また条件があり、javascriptで記入すること

トップへ戻るのフィードイン、フィードアウトは
fadeAnimation関数を使うこと

使うキーワード
window.addEventListener
window.scroll
スムーズスクロール

よろしくお願い致します