Scroll to Top is a typical button for a blog. We can implement it by JavaScript or simply HTML / CSS.
Version
Alpine 3.9
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/alpinejs" defer></script>
<title>Alpine</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aspernatur
culpa, dicta doloremque doloribus pariatur quidem repellendus sequi
tempora totam veniam vitae voluptates voluptatibus. Aliquam aliquid
distinctio, dolorem doloribus fuga fugit in mollitia nulla officia omnis
perspiciatis porro possimus reiciendis rem sunt. Alias atque aut
consequatur corporis cumque cupiditate, delectus dolore dolores iusto
molestias obcaecati omnis sapiente ullam. Accusamus amet asperiores atque
doloremque dolores doloribus, eos incidunt, ipsam, iure minus natus nemo
nesciunt nulla obcaecati odit officia officiis optio placeat quaerat
quidem similique soluta ut. Aperiam architecto autem, ducimus in labore
laudantium recusandae sed. Labore molestiae pariatur praesentium, ratione
repellendus rerum saepe vero? Alias harum nostrum obcaecati perferendis
quaerat. A ex explicabo inventore quos voluptates? Accusamus at debitis,
eos error excepturi illo, minus molestiae non nulla sint sit suscipit! At
eligendi facere fuga mollitia nesciunt nihil nisi officiis quisquam
tempore voluptatum. Amet asperiores aspernatur assumenda at beatae debitis
dignissimos dolorum esse exercitationem facilis, fuga id illum in incidunt
inventore ipsa laboriosam maiores necessitatibus nesciunt non nostrum odio
odit optio perspiciatis possimus quidem quis quo quos, sequi, sint soluta
tenetur totam voluptate? Cupiditate, fuga in officiis optio quae quia
sequi sint! Aliquid amet debitis dicta ex fuga minima nobis quasi
quibusdam quo ut. Accusantium aperiam consectetur deleniti eligendi,
libero minus molestiae nobis sunt tempore voluptates. Ab corporis culpa
dicta dolores eveniet, incidunt ipsum officia sunt tempora vel. A adipisci
alias aliquid aperiam asperiores beatae consequatur consequuntur enim
error, est expedita in itaque laborum minus, nostrum odio omnis possimus
quidem, quo repellat repudiandae rerum tempore ut voluptatem voluptatum. A
ad aspernatur dicta dignissimos dolor, eos et eveniet laboriosam maxime
nihil officia, quibusdam ratione tempora tenetur vel. Animi aperiam
beatae, consequuntur cumque dicta dolorem, ea eligendi eos est hic illo,
iste pariatur perferendis possimus saepe voluptas voluptate. Accusantium
doloremque excepturi explicabo ipsa perspiciatis quam, vitae. Asperiores
aspernatur debitis deserunt ducimus et eveniet explicabo fugit, nihil
optio pariatur quidem recusandae reiciendis repellendus reprehenderit sit.
Accusamus accusantium at autem, ducimus harum hic iste necessitatibus
officiis placeat! Eos ipsam iure minima molestias optio quo voluptates!
Dicta illo incidunt itaque quia recusandae! Alias aliquid consequuntur
dicta dolor fugiat illo impedit ipsa laboriosam nobis porro, recusandae
soluta, totam unde. Deserunt eaque hic iure nam nisi sint sit, voluptatum.
Accusamus aliquam assumenda at beatae consequatur culpa debitis dicta
doloribus dolorum, eius exercitationem fugit illum impedit ipsam iste
maxime minus neque nesciunt officiis omnis perferendis quae quaerat quo
reprehenderit sint sit suscipit vel velit veniam voluptates. Corporis,
suscipit, voluptate. Animi consequatur hic illo maxime numquam quae quasi
sequi veniam! Aperiam doloribus incidunt nobis quaerat repudiandae rerum!
A aliquid assumenda deleniti enim excepturi explicabo fugiat fugit ipsum,
labore laboriosam maiores nesciunt obcaecati officia quae rem. Aliquam
assumenda autem, consequatur corporis, doloribus facere id nesciunt
numquam perspiciatis repudiandae rerum sed vitae? Ad consectetur dolore
ipsum, iste itaque molestiae officia pariatur, praesentium quia ratione
sed sit, temporibus vel! Corporis cum doloribus ducimus officia. Aperiam
blanditiis consequuntur cum doloribus enim esse excepturi ipsam laborum
molestias, necessitatibus nesciunt nihil nulla omnis quia sequi similique
sunt ullam vitae voluptas, voluptates. Animi dolorem molestiae odit
praesentium quaerat quia soluta ullam velit? Aliquid, blanditiis dolor
odio odit quaerat quis recusandae sit voluptatem. A accusamus aliquid
architecto atque beatae consectetur distinctio dolorem dolorum error esse
eveniet exercitationem facere fuga illo illum ipsam iste iure laboriosam
laborum natus neque nisi nostrum numquam obcaecati, odio possimus, quae
quas quia quidem quis reiciendis repudiandae saepe soluta tempora tenetur
ut voluptatum. Esse et ex fuga mollitia numquam! Aperiam ea nemo nesciunt
nulla perferendis ratione vel! Alias aliquid autem error eveniet facilis
fuga ipsam iure iusto labore laboriosam, laborum laudantium modi non omnis
quam quasi qui ratione recusandae reiciendis rerum, sapiente sequi tempora
totam vel veritatis vitae voluptatem voluptates. Accusantium adipisci
aperiam aut delectus deleniti dolorum ea eligendi eos eum facere id ipsa
iure labore magni nobis officia optio pariatur perferendis provident
quaerat quo sed, suscipit tenetur totam voluptatem! Eius eos ex facere hic
magni maxime non quasi quod reprehenderit suscipit? Hic ipsa molestias
reiciendis temporibus. Accusamus asperiores est perferendis sit veritatis.
A ad aliquam atque aut autem culpa debitis dicta distinctio dolor
expedita, illo ipsam itaque laboriosam libero minus necessitatibus neque
non nulla officiis quae quaerat quasi, quidem recusandae similique sint
suscipit tempore tenetur vero voluptate voluptatibus! Autem, facilis
impedit incidunt magni quas ut velit voluptates. At cumque incidunt libero
officia? Aliquid aspernatur assumenda aut, consectetur cum cumque
distinctio dolorem dolores ducimus eaque eligendi esse et ex expedita
explicabo fugiat id impedit ipsam itaque iure iusto libero modi mollitia
nam natus neque nobis officia omnis perferendis possimus quaerat quas
reprehenderit soluta suscipit totam ullam ut. Aliquid assumenda at aut,
beatae cum cumque deserunt dignissimos dolorum, ea, eaque eum eveniet in
inventore labore laborum minus necessitatibus nostrum nulla officiis optio
perferendis placeat quod recusandae rerum veniam vitae voluptas
voluptatem. A ad aliquid cumque doloremque inventore neque, odio vel!
Aliquid amet beatae consequuntur culpa cumque dolores eligendi enim, eos
eum eveniet iste minus modi non pariatur quas quos reiciendis saepe sit
vitae voluptas! A ad, at atque beatae dolores eligendi, et excepturi
fugiat in ipsa labore nemo nesciunt nulla numquam obcaecati omnis
perferendis quia ratione recusandae rem rerum sunt tempore voluptatem.
Asperiores nostrum possimus quibusdam similique suscipit. Accusantium
amet, aperiam delectus dicta, dolor ea eos hic illo impedit laudantium
molestias necessitatibus odio perferendis, placeat provident sequi tempore
velit veniam. Asperiores consectetur dolorem doloribus error illum ipsam
labore nisi non optio perferendis, perspiciatis quas quasi quibusdam quis
repellendus totam voluptate. Debitis deleniti ducimus error est maiores
minus provident? Animi at eveniet expedita incidunt iure necessitatibus
quam quas quia rem, tempora vel voluptates! Eveniet, officiis,
reprehenderit? Assumenda distinctio incidunt magni non odio officiis
repellat vel? At cumque doloremque doloribus eligendi magnam nostrum
officia. Eius illum iste molestias neque quod. Ab architecto atque ducimus
possimus. Molestias, officia quis. Aliquid atque corporis, ducimus et eum
labore laborum magnam molestiae molestias natus necessitatibus neque nihil
nobis non obcaecati pariatur placeat quae quam quibusdam reiciendis rem
velit vero voluptatum? Adipisci asperiores consequuntur excepturi fuga
iure quasi quisquam repellendus soluta unde voluptas.
</div>
<div x-data>
<button @click="scroll({ top: 0, behavior: 'smooth' })">Go Top</button>
</div>
</body>
</html>
Line 117
<div x-data>
<button @click="scroll({ top: 0, behavior: 'smooth' })">Go Top</button>
</div>
- Use
window.scrollto scroll to top withsmoothbehavior
HTML / CSS
<!DOCTYPE html>
<html lang="en" id="top">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/alpinejs" defer></script>
<title>Alpine</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aspernatur
culpa, dicta doloremque doloribus pariatur quidem repellendus sequi
tempora totam veniam vitae voluptates voluptatibus. Aliquam aliquid
distinctio, dolorem doloribus fuga fugit in mollitia nulla officia omnis
perspiciatis porro possimus reiciendis rem sunt. Alias atque aut
consequatur corporis cumque cupiditate, delectus dolore dolores iusto
molestias obcaecati omnis sapiente ullam. Accusamus amet asperiores atque
doloremque dolores doloribus, eos incidunt, ipsam, iure minus natus nemo
nesciunt nulla obcaecati odit officia officiis optio placeat quaerat
quidem similique soluta ut. Aperiam architecto autem, ducimus in labore
laudantium recusandae sed. Labore molestiae pariatur praesentium, ratione
repellendus rerum saepe vero? Alias harum nostrum obcaecati perferendis
quaerat. A ex explicabo inventore quos voluptates? Accusamus at debitis,
eos error excepturi illo, minus molestiae non nulla sint sit suscipit! At
eligendi facere fuga mollitia nesciunt nihil nisi officiis quisquam
tempore voluptatum. Amet asperiores aspernatur assumenda at beatae debitis
dignissimos dolorum esse exercitationem facilis, fuga id illum in incidunt
inventore ipsa laboriosam maiores necessitatibus nesciunt non nostrum odio
odit optio perspiciatis possimus quidem quis quo quos, sequi, sint soluta
tenetur totam voluptate? Cupiditate, fuga in officiis optio quae quia
sequi sint! Aliquid amet debitis dicta ex fuga minima nobis quasi
quibusdam quo ut. Accusantium aperiam consectetur deleniti eligendi,
libero minus molestiae nobis sunt tempore voluptates. Ab corporis culpa
dicta dolores eveniet, incidunt ipsum officia sunt tempora vel. A adipisci
alias aliquid aperiam asperiores beatae consequatur consequuntur enim
error, est expedita in itaque laborum minus, nostrum odio omnis possimus
quidem, quo repellat repudiandae rerum tempore ut voluptatem voluptatum. A
ad aspernatur dicta dignissimos dolor, eos et eveniet laboriosam maxime
nihil officia, quibusdam ratione tempora tenetur vel. Animi aperiam
beatae, consequuntur cumque dicta dolorem, ea eligendi eos est hic illo,
iste pariatur perferendis possimus saepe voluptas voluptate. Accusantium
doloremque excepturi explicabo ipsa perspiciatis quam, vitae. Asperiores
aspernatur debitis deserunt ducimus et eveniet explicabo fugit, nihil
optio pariatur quidem recusandae reiciendis repellendus reprehenderit sit.
Accusamus accusantium at autem, ducimus harum hic iste necessitatibus
officiis placeat! Eos ipsam iure minima molestias optio quo voluptates!
Dicta illo incidunt itaque quia recusandae! Alias aliquid consequuntur
dicta dolor fugiat illo impedit ipsa laboriosam nobis porro, recusandae
soluta, totam unde. Deserunt eaque hic iure nam nisi sint sit, voluptatum.
Accusamus aliquam assumenda at beatae consequatur culpa debitis dicta
doloribus dolorum, eius exercitationem fugit illum impedit ipsam iste
maxime minus neque nesciunt officiis omnis perferendis quae quaerat quo
reprehenderit sint sit suscipit vel velit veniam voluptates. Corporis,
suscipit, voluptate. Animi consequatur hic illo maxime numquam quae quasi
sequi veniam! Aperiam doloribus incidunt nobis quaerat repudiandae rerum!
A aliquid assumenda deleniti enim excepturi explicabo fugiat fugit ipsum,
labore laboriosam maiores nesciunt obcaecati officia quae rem. Aliquam
assumenda autem, consequatur corporis, doloribus facere id nesciunt
numquam perspiciatis repudiandae rerum sed vitae? Ad consectetur dolore
ipsum, iste itaque molestiae officia pariatur, praesentium quia ratione
sed sit, temporibus vel! Corporis cum doloribus ducimus officia. Aperiam
blanditiis consequuntur cum doloribus enim esse excepturi ipsam laborum
molestias, necessitatibus nesciunt nihil nulla omnis quia sequi similique
sunt ullam vitae voluptas, voluptates. Animi dolorem molestiae odit
praesentium quaerat quia soluta ullam velit? Aliquid, blanditiis dolor
odio odit quaerat quis recusandae sit voluptatem. A accusamus aliquid
architecto atque beatae consectetur distinctio dolorem dolorum error esse
eveniet exercitationem facere fuga illo illum ipsam iste iure laboriosam
laborum natus neque nisi nostrum numquam obcaecati, odio possimus, quae
quas quia quidem quis reiciendis repudiandae saepe soluta tempora tenetur
ut voluptatum. Esse et ex fuga mollitia numquam! Aperiam ea nemo nesciunt
nulla perferendis ratione vel! Alias aliquid autem error eveniet facilis
fuga ipsam iure iusto labore laboriosam, laborum laudantium modi non omnis
quam quasi qui ratione recusandae reiciendis rerum, sapiente sequi tempora
totam vel veritatis vitae voluptatem voluptates. Accusantium adipisci
aperiam aut delectus deleniti dolorum ea eligendi eos eum facere id ipsa
iure labore magni nobis officia optio pariatur perferendis provident
quaerat quo sed, suscipit tenetur totam voluptatem! Eius eos ex facere hic
magni maxime non quasi quod reprehenderit suscipit? Hic ipsa molestias
reiciendis temporibus. Accusamus asperiores est perferendis sit veritatis.
A ad aliquam atque aut autem culpa debitis dicta distinctio dolor
expedita, illo ipsam itaque laboriosam libero minus necessitatibus neque
non nulla officiis quae quaerat quasi, quidem recusandae similique sint
suscipit tempore tenetur vero voluptate voluptatibus! Autem, facilis
impedit incidunt magni quas ut velit voluptates. At cumque incidunt libero
officia? Aliquid aspernatur assumenda aut, consectetur cum cumque
distinctio dolorem dolores ducimus eaque eligendi esse et ex expedita
explicabo fugiat id impedit ipsam itaque iure iusto libero modi mollitia
nam natus neque nobis officia omnis perferendis possimus quaerat quas
reprehenderit soluta suscipit totam ullam ut. Aliquid assumenda at aut,
beatae cum cumque deserunt dignissimos dolorum, ea, eaque eum eveniet in
inventore labore laborum minus necessitatibus nostrum nulla officiis optio
perferendis placeat quod recusandae rerum veniam vitae voluptas
voluptatem. A ad aliquid cumque doloremque inventore neque, odio vel!
Aliquid amet beatae consequuntur culpa cumque dolores eligendi enim, eos
eum eveniet iste minus modi non pariatur quas quos reiciendis saepe sit
vitae voluptas! A ad, at atque beatae dolores eligendi, et excepturi
fugiat in ipsa labore nemo nesciunt nulla numquam obcaecati omnis
perferendis quia ratione recusandae rem rerum sunt tempore voluptatem.
Asperiores nostrum possimus quibusdam similique suscipit. Accusantium
amet, aperiam delectus dicta, dolor ea eos hic illo impedit laudantium
molestias necessitatibus odio perferendis, placeat provident sequi tempore
velit veniam. Asperiores consectetur dolorem doloribus error illum ipsam
labore nisi non optio perferendis, perspiciatis quas quasi quibusdam quis
repellendus totam voluptate. Debitis deleniti ducimus error est maiores
minus provident? Animi at eveniet expedita incidunt iure necessitatibus
quam quas quia rem, tempora vel voluptates! Eveniet, officiis,
reprehenderit? Assumenda distinctio incidunt magni non odio officiis
repellat vel? At cumque doloremque doloribus eligendi magnam nostrum
officia. Eius illum iste molestias neque quod. Ab architecto atque ducimus
possimus. Molestias, officia quis. Aliquid atque corporis, ducimus et eum
labore laborum magnam molestiae molestias natus necessitatibus neque nihil
nobis non obcaecati pariatur placeat quae quam quibusdam reiciendis rem
velit vero voluptatum? Adipisci asperiores consequuntur excepturi fuga
iure quasi quisquam repellendus soluta unde voluptas.
</div>
<div x-data>
<a href="#top">Go Top</a>
</div>
</body>
<style>
html {
scroll-behavior: smooth;
}
</style>
</html>
Line 2
<html lang="en" id="top">
- Set
idfor<html>
Line 118
<a href="#top">Go Top</a>
- Go to
#topby HTML
Line 112
html {
scroll-behavior: smooth;
}
- Scroll to top with
smoothbehavior
Conclusion
- We can even implement
scroll to topby only HTML and CSS