javascript サイトを上下に移動させる

javascript サイトを上下に移動させる

javascriptで、transformのtranslateを使用して、サイトを上下に移動させるサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

translate使い方

transformのtranslate使用すると、指定した要素を上下に移動させることが可能です。

translate使い方

実行結果をみると、指定した要素が上下に移動していることが確認できます。

macのsafari(13.1.1)でも同じ結果となります。

また、document.getElementByIdの省略と関数をアロー化して、簡潔に記述することもできます。

サンプルコード

以下は、
「上へ」ボタンをクリックすると「要素」を上に、
「下へ」ボタンをクリックすると「要素」を下に移動させる
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

移動していることが確認できます。