Fork me on GitHub

实现平滑滚动回到顶部

# 场景

🍰 实现页面滚动到一定位置,出现返回顶部图标
🍰 点击图标实现页面平滑滚动返回顶部

# 方案

采用 window.requestAnimationFrame( ) 实现

window.requestAnimationFrame( ) 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。

当你需要更新屏幕画面时就可以调用此方法
在浏览器下次重绘前执行回调函数

🍰 核心功能代码:

1
2
3
4
5
6
7
8
9
function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
//告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画
window.requestAnimationFrame(smoothscroll);
//进行页面位置重绘
window.scrollTo (0,currentScroll - (currentScroll/10));
}
}

🍰 完整代码:

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>平滑滚动回到顶部</title>
    <style>
        body{
            height: 20000px;
            background-image: url('https://jwchan.cn/images/background_header.png');
            background-position: center 0;
            background-size: contain;
            background-repeat: repeat;
        }
        #kotori{
            position: fixed;
            bottom: -10px;
            left: -10px;
            height: 70px;
            width: 70px;
            cursor: pointer;
            transition: 0.2s all;
            display: block;
            z-index: 100;
        }
        #kotori:hover{
            transform: translate(10px,-10px)
        }
    </style>
</head>
<body>
    <img id="kotori" src="https://jwchan.cn/images/kotori.png" onclick="smoothscroll()">
<script>

    //监听页面滚动
    window.addEventListener("scroll",handleScroll)
    //滚动条滚动事件处理函数
    function handleScroll(){         
        //获取滚动高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        //可视区域高度
        var clientHeight = document.documentElement.clientHeight; 
        //如果滚动高度大于可视区域高度,则显示回到顶部按钮
        if(osTop >= clientHeight){      
            document.querySelector('#kotori').style.display = 'block';
        }else{         //否则隐藏
            document.querySelector('#kotori').style.display = 'none';
        }
    }

    //回到顶部功能函数
    function smoothscroll(){
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
            window.requestAnimationFrame(smoothscroll);
            window.scrollTo (0,currentScroll - (currentScroll/10));
        }
    }
</script>
</body>
</html>

🍰 这是相对顺滑的平滑滚动最简单的实现了 ~
🍰 实现效果可参考本网站的左下角的 kitoro 酱 ~

0%
            [00:06.59]呼んでいる 胸のどこか奥で
            [00:12.06]いつも心踊る 夢を見たい
            [00:18.09]かなしみは 数えきれないけれど
            [00:23.87]その向こうできっと あなたに会える
            [00:29.40]
            [00:31.81]繰り返すあやまちの そのたび ひとは
            [00:38.20]ただ青い空の 青さを知る
            [00:43.33]果てしなく 道は続いて見えるけれど
            [00:50.92]この両手は 光を抱ける
            [00:54.89]
            [00:57.26]さよならのときの 静かな胸
            [01:02.80]ゼロになるからだが 耳をすませる
            [01:08.60]生きている不思議 死んでいく不思議
            [01:14.53]花も風も街も みんなおなじ
            [01:20.50]
            [01:22.40]nananan lalala lululu
            [01:47.63]呼んでいる 胸のどこか奥で
            [01:53.56]いつも何度でも 夢を描こう
            [01:59.14]かなしみの数を 言い尽くすより
            [02:05.16]同じくちびるで そっとうたおう
            [02:11.48]
            [02:12.96]閉じていく思い出の そのなかにいつも
            [02:19.31]忘れたくない ささやきを聞く
            [02:24.47]こなごなに砕かれた 鏡の上にも
            [02:31.12]新しい景色が 映される
            [02:35.89]
            [02:38.27]はじまりの朝の静かな窓
            [02:43.72]ゼロになるからだ 充たされてゆけ
            [02:49.70]海の彼方には もう探さない
            [02:55.66]輝くものは いつもここに
            [03:01.66]わたしのなかに 見つけられたから
            [03:08.20]
            [03:14.13]nananan lalala lululu
        
            [by:嘶哑音符]
            [00:00.12]二人の間 通り過ぎた風は
            [00:07.15]どこから寂しさを運んできたの
            [00:13.66]泣いたりしたそのあとの空は
            [00:19.82]やけに透き通っていたりしたんだ
            [00:26.02]music
            [00:37.03]いつもは尖ってた父の言葉が
            [00:42.82]今日は暖かく感じました
            [00:48.47]優しさも笑顔も夢の語り方も
            [00:54.07]知らなくて全部 君を真似たよ
            [00:59.48]もう少しだけでいい あと少しだけでいい
            [01:05.39]もう少しだけでいいから
            [01:11.20]もう少しだけでいい あと少しだけでいい
            [01:16.97]もう少しだけ くっついていようか
            [01:21.11]music
            [01:25.69]僕らタイムフライヤー 時を駆け上がるクライマー
            [01:30.74]時のかくれんぼ はぐれっこはもういやなんだ
            [01:37.51]嬉しくて泣くのは 悲しくて笑うのは
            [01:41.74]君の心が 君を追い越したんだよ
            [01:46.78]music
            [02:08.22]星にまで願って 手にいれたオモチャも
            [02:14.10]部屋の隅っこに今 転がってる
            [02:19.83]叶えたい夢も 今日で100個できたよ
            [02:25.53]たった一つといつか 交換こしよう
            [02:31.26]music
            [02:37.14]いつもは喋らないあの子に今日は
            [02:42.95]放課後「また明日」と声をかけた
            [02:48.50]慣れないこともたまにならいいね
            [02:54.25]特にあなたが 隣にいたら
            [02:59.69]もう少しだけでいい あと少しだけでいい
            [03:05.39]もう少しだけでいいから
            [03:11.09]もう少しだけでいい あと少しだけでいい
            [03:16.69]もう少しだけくっついていようよ
            [03:21.02]music
            [03:25.75]僕らタイムフライヤー 君を知っていたんだ
            [03:30.42]僕が 僕の名前を 覚えるよりずっと前に
            [03:43.62]君のいない 世界にも 何かの意味はきっとあって
            [03:49.00]でも君のいない 世界など 夏休みのない 八月のよう
            [03:55.15]君のいない 世界など 笑うことない サンタのよう
            [04:00.60]君のいない 世界など
            [04:08.70]music
            [04:34.00]僕らタイムフライヤー 時を駆け上がるクライマー
            [04:39.32]時のかくれんぼ はぐれっこはもういやなんだ
            [04:46.03]なんでもないや やっぱりなんでもないや
            [04:50.46]今から行くよ
            [04:55.00]僕らタイムフライヤー 時を駆け上がるクライマー
            [04:59.98]時のかくれんぼ はぐれっこ はもういいよ
            [05:06.45]君は派手なクライヤー その涙 止めてみたいな
            [05:11.34]だけど 君は拒んだ 零れるままの涙を見てわかった
            [05:18.08]嬉しくて泣くのは 悲しくて 笑うのは
            [05:22.51]僕の心が 僕を追い越したんだよ
            [05:27.55]end
        
            [ti:Down by the salley gardens]
            [ar:藤田惠美]
            [al:挪威甘菊]
            [by:]
            [00:12.00]Down by the salley gardens my love and I did meet
            [00:25.00]She passed the salley gardens with little snow-white feet
            [00:38.00]She did me take love easy, as the leaves grow on the tree
            [00:50.00]But I, being young and foolish, with her would not agree
            [01:04.00]
            [01:15.00]In a filed by the river my love and I did stand
            [01:28.00]And on my leaning shoulder she laid her snows-white hand
            [01:40.00]She bid me take life easy, as the grass grows on the weirs
            [01:52.00]But I was young and foolish, and now I am full of tears
            [02:06.00]
            [02:54.00]Down by the salley gardens my love and I did meet
            [03:05.00]She passed the salley gardens with little snow-white feet
            [03:18.00]She did me take love easy, as the leaves grow on the tree
            [03:30.00]But I, being young and foolish, with her would not agree
        
            [00:11.860]夜明けまであと一時間 もうそろそろ行こう
            [00:23.120]聞こえるのは眠る君のかすかな寝息だけ
            [00:34.240]
            [00:37.710]目を閉じた君の横顔 とてもきれいだよ
            [00:49.440]さよなら 君の耳元にそっと囁いた
            [01:00.790]
            [01:01.480]ああ、僕は君を置いて 今ここを出て行く
            [01:12.970]外は雨 音もなく 僕の頬を濡らす
            [01:24.330]
            [01:36.410]君と出会ったのはたった半年前のこと
            [01:48.080]もうずいぶん前のことのような気がする
            [01:59.460]
            [01:59.900]今思えば僕らろくに話もしなかった
            [02:11.220]时间はいつも余るほどあったはずなのに
            [02:22.640]
            [02:23.090]ああ、僕は君を置いて 今ここを出て行く
            [02:34.740]外の雨は僕の涙、静かに降り続く
            [02:46.870]外の雨は僕の涙、静かに降り続く
            [02:59.480]
        
            [00:07.694]灯りを消したまま話を続けたら
            [00:19.901]ガラスの向こう側で星がひとつ消えた
            [00:26.559]からまわりしながら通りを駆け抜けて
            [00:37.816]砕けるその時は君の名前だけ呼ぶよ
            [00:45.374]広すぎる霊園のそばの このアパートは薄ぐもり
            [00:56.155]暖かい幻を見てた
            [01:04.441]猫になりたい 君の腕の中
            [01:13.254]寂しい夜が終わるまでここにいたいよ
            [01:22.621]猫になりたい 言葉ははかない
            [01:31.369]消えないようにキズつけてあげるよ
            [01:47.999]目を閉じて浮かべた密やかな逃げ場所は
            [01:57.880]シチリアの浜辺の絵ハガキとよく似てた
            [02:05.646]砂ぼこりにまみれて歩く 街は季節を嫌ってる
            [02:15.629]つくられた安らぎを捨てて
            [02:23.888]猫になりたい 君の腕の中
            [02:32.579]寂しい夜が終わるまでここにいたいよ
            [02:41.912]猫になりたい 言葉ははかない
            [02:50.362]消えないようにキズつけてあげるよ
        
            [by:最短距離]
            [00:08.40]落し物をしたのね そんな曇りの日に
            [00:15.78]プラネタリュウムに行って 重いドアを閉じましょうよ
            [00:23.28]いつのまに落としたの それさえわからなくて
            [00:30.55]涙をもう落とせない なら星見上げましょうよ
            [00:38.12]何がほんと作り事 答えは欲しくないけど
            [00:46.23]あなたが言う言葉は本当に したいよ
            [00:57.77]落し物をしたのね そんな曇りの日に
            [01:05.20]プラネタリュウムに行って 重いドアを閉じましょうよ
            [01:12.71]魔法信じれないけど 魔法みたいな力を
            [01:19.74]信じたくってこうして こんな星を見上げるんだ
            [01:26.89]差しわされた あなたの手を
            [01:30.27]私は今 ほら 握れなくて
            [01:34.12]通り過ぎてく 遠い答えを
            [01:37.72]言いたくても ほら言い出せない
            [01:57.90]
            [01:57.96]落し物をしたのね あなたを信じたことを
            [02:05.25]プラネタリュウム出るから 私のドア開けましょうよ
            [02:11.69]私のドア開けましょうよ
            [02:15.29]私のドア開けましょうよ
            [02:19.60]
            [02:19.67]はい!
            [02:21.60]はい!
            [02:23.47]はい!
            [02:24.89]はい!
            [02:26.91]はい!
            [02:28.74]はいはい!
            [02:30.97]はい!
            [02:32.40]はい!