滑らかなスクロール効果をクリックします.

43491 ワード

jsベース javascript

最近はクリックして指定された高さにスクロールする効果を実現します.資料を見てから、これを整理して自分のノートを作ります.

 <div>
        <button>    </button>
        <div>

            <span>      </span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>

        </div>
    </div>```
                     
 

```javascript

高さをつける

 span {
     
            width: 70px;
            height: 100px;
            display: block;
            border: 1px saddlebrown solid;
        }

        div {
     
            width: 200px;

            margin: auto;
            text-align: center;
        }

いくつかコピーしてもっと高くなります.

   <button>    </button>
        <div>

            <span>      </span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>

            <span>9</span>

        </div>

そして効果を書きます

  //          div
    let div = document.querySelectorAll("div")[0]
    //      span     
    let start = document.querySelectorAll("span")
    //    
    let button1 = document.querySelectorAll("button")[0]

    let startTap = start[0].offsetTop //      
    //       
    button1.onclick = function () {
     
        //  *   
        var dis = start[0].offsetHeight * Number(start.length)

        //      
        let ju1 = document.body.offsetHeight
        aa(ju1, startTap) //      
        function aa(x1, y1) {
     

            let distance = y1 - x1  //    -        
            let xx = x1  //    
            setTimeout(() => {
     //   
                const dist = Math.ceil(distance / 10)  //  
                // 
                xx += dist

                window.scrollTo(xx, x1)
                //    
                aa(xx, y1)

            }, 100)//      
        }
    }

効果は伝わりません.このままでいいです.クリアタイマーを追加してもいいです.
すべてのコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
     
            width: 70px;
            height: 100px;
            display: block;
            border: 1px saddlebrown solid;
        }

        div {
     
            width: 200px;

            margin: auto;
            text-align: center;
        }
    </style>
</head>

<body>

    <div>
        <button>    </button>
        <div>

            <span>      </span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>

            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>

            <span>9</span>

        </div>
    </div>

</body>
<script>



    //          div
    let div = document.querySelectorAll("div")[0]
    //      span     
    let start = document.querySelectorAll("span")
    //    
    let button1 = document.querySelectorAll("button")[0]

    let startTap = start[0].offsetTop //      
    //       
    button1.onclick = function () {
     
        //  *   
        var dis = start[0].offsetHeight * Number(start.length)

        //      
        let ju1 = document.body.offsetHeight
        aa(startTap, ju1) //      
        function aa(x1, y1) {
     

            let distance = y1 - x1  //    -        
            let xx = x1  //    
            setTimeout(() => {
     //   
                const dist = Math.ceil(distance / 10)  //  
                // 
                xx += dist

                window.scrollTo(xx, x1)
                //    
                aa(xx, y1)

            }, 100)//      
        }
    }

</script>

</html>

javaのwebタスクアプリケーション:タイミング実行タスク