当前位置:网站首页>Click smooth scrolling effect

Click smooth scrolling effect

2021-01-04 12:51:50 osc_ lg0msmnd

Recently, to achieve a click to scroll to the specified height effect
After looking up the information, the whole
Make a note of yourself

 <div>
        <button> Click the jump </button>
        <div>

            <span> I'm the starting position </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>```
     It's just a note for realizing the function   Style doesn't matter 
 

```javascript

Give me a height

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

        div {
   
   
            width: 200px;

            margin: auto;
            text-align: center;
        }

Copy a few copies to get higher

   <button> Click the jump </button>
        <div>

            <span> I'm the starting position </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>

Then write the effect

  //  Get the start position first div
    let div = document.querySelectorAll("div")[0]
    //  Get the first one span  Starting position 
    let start = document.querySelectorAll("span")
    // Get button 
    let button1 = document.querySelectorAll("button")[0]

    let startTap = start[0].offsetTop // Get the top distance 
    //  Click on the event function 
    button1.onclick = function () {
   
   
        // Height * length  
        var dis = start[0].offsetHeight * Number(start.length)

        //  Get total height 
        let ju1 = document.body.offsetHeight
        aa(ju1, startTap) // The distance to transmit 
        function aa(x1, y1) {
   
   

            let distance = y1 - x1  //   distance - The distance from the beginning to the top 
            let xx = x1  // At the top of the distance 
            setTimeout(() => {
   
   // Timer 
                const dist = Math.ceil(distance / 10)  // Constant 
                // Add 
                xx += dist

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

            }, 100)// Set animation time 
        }
    }

The effect doesn't pass, that's it
Add a clear timer if necessary

All the code

<!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> Click the jump </button>
        <div>

            <span> I'm the starting position </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>



    //  Get the start position first div
    let div = document.querySelectorAll("div")[0]
    //  Get the first one span  Starting position 
    let start = document.querySelectorAll("span")
    // Get button 
    let button1 = document.querySelectorAll("button")[0]

    let startTap = start[0].offsetTop // Get the top distance 
    //  Click on the event function 
    button1.onclick = function () {
   
   
        // Height * length  
        var dis = start[0].offsetHeight * Number(start.length)

        //  Get total height 
        let ju1 = document.body.offsetHeight
        aa(startTap, ju1) // The distance to transmit 
        function aa(x1, y1) {
   
   

            let distance = y1 - x1  //   distance - The distance from the beginning to the top 
            let xx = x1  // At the top of the distance 
            setTimeout(() => {
   
   // Timer 
                const dist = Math.ceil(distance / 10)  // Constant 
                // Add 
                xx += dist

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

            }, 100)// Set animation time 
        }
    }

</script>

</html>

版权声明
本文为[osc_ lg0msmnd]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/01/20210104124718372v.html

随机推荐