Scroll to Top using Jquery/Javascript in 3 Easy Steps

1
Scroll to Top using Jquery/Javascript in 3 Easy
Steps

• by Pawan
• Table of Contents
• Introduction
• Using jQuery Method
• JavaScript ScrollToTop
• With window.onscroll()
• With document.documentElement.scrollTop()
• With document.documentElement.scrollIntoView()
• Scroll to Top with No Javascript(using HTML
  fragments)
• Conclusion
• Introduction
• Scroll to Top is a very useful and used feature
  on many websites. With the scroll to the top
  button, we can enable website visitors to jump
  back to the top section of our website with a
  single click.
• With the javascript scrolltotop button, you can
  boost page ranking to the top of search results
  by making your website easily navigatable.
  Speaking of good navigation, check out our Crud
  in CodeIgniter 4 latest version.

2
Here we will show you how to make a custom
Javascript scroll to the top. Or you use jQuery
as well. We will teach you both methods and a
bonus method. So without further ado, lets get
started.

• Using jQuery Method
• Using the jQuery method, your code is easy to
  read and understand. And since jQuery is a
  highly popular library and used in all kinds of
  websites, this method is one of the best.
• Then lets get to the coding section
• index.html
• lt!DOCTYPE htmlgt
• lthtml lang"en"gt
• ltheadgt
• ltmeta charset"UTF-8"gt
• ltmeta http-equiv"X-UA-Compatible"
  content"IEedge"gt
• ltmeta name"viewport" content"widthdevice-width,
  initial-scale1.0"gt
• lttitlegtScroll to Toplt/titlegt
• ltlink rel"stylesheet" href"style.css"gt
• lt/headgt
• ltbodygt
• lth1gtScroll To Toplt/h1gt
• ltimg src"image.jpg" alt"image"gt

3
) Feel free to check this whole code. You can
download it from our Github Repo directly with
this link Scroll To Top with the jQuery Want
more? What if you want to activate your
scroll-to-top functionality after a certain
distance is scrolled down on your webpage? Then
just make these small modifications to your
jQuery code Using the jQuery scroll() function
we first determine if enough page is scrolled.
Then only we start showing the scrolltotop
button to website visitors. And once we reach the
top of the page, the button disappears
again. (window).scroll(function () if
((window).scrollTop() gt 600) ("a").css("displ
ay", "block") else ("a").css("display",
"none") ) ("a").click(function (e)
('html, body').animate( scrollTop 0 ,
'slow') ) Scroll To Top with the
jQuery(Advance Version)
JavaScript ScrollToTop Using javascript
scrolltotop is ideal in a situation where you
cannot use the jQuery library. There are
multiple ways to achieve this. Here are the 3
most used methods to build javascript
scrolltotop With window.onscroll() This is the
easiest method when using only javascript in your
project. CodePen Embed Fallback With
document.documentElement.scrollTop() If for any
reason, our previous Javascript scrolltotop
method didnt work. Feel free to try this
method. Check out the below CodePen where we give
you a live example CodePen Embed Fallback
4
With document.documentElement.scrollIntoView() Las
tly, try this new javascript scrolltotop method
using the document object modal. We explain it
in the below CodePen example CodePen Embed
Fallback Note Adding scroll-behavior smooth
is a must in your CSS file. Without this code,
your scrolling animation will be instantaneous
and will feel jerky. If you are looking to bling
up your website with Page Scroll animations,
check out our post on 6 methods to implement
page scroll animation. Check out our code at
Github Repo directly Javascript Scroll To Top
Source code Scroll to Top with No
Javascript(using HTML fragments) HTML fragments
allow scrolling to any section of a webpage
linked with the id and lta hrefidgt tag
combination. So we can use this combo to simulate
scrolling to the top without js. But we dont
recommend using it professionally in your
project. Still, this way you can see that HTML
fragments are a pretty powerful way for
navigating your website section. lt!DOCTYPE
htmlgt lthtml lang"en"gt ltheadgt ltmeta
charset"UTF-8"gt ltmeta http-equiv"X-UA-Compatible
" content"IEedge"gt ltmeta name"viewport"
content"widthdevice-width, initial-scale1.0"gt lt
titlegtScroll to Toplt/titlegt ltlink
rel"stylesheet" href"style.css"gt ltstylegt html
scroll-behavior smooth lt/stylegt lt/headgt ltbod
y id"top"gt lth1gtScroll To Toplt/h1gt ltimg
src"image.jpg" alt"image"gt ltimg src"image.jpg"
alt"image"gt
5
ltimg src"image.jpg" alt"image"gt lta
href"top"gtScroll to Toplt/agt lt/bodygt lt/htmlgt By
the way, if you are trying to learn how to build
an HTML form with PHPmailer check out this
guide. You can check this code in our Github
repo Scroll To Top without JS
Conclusion We highly recommend using the jQuery
method because its short and less verbose. Use
Javascript Scroll To Top functionality only when
your project doesnt need jQuery at all. We hope
you enjoyed our article on how to build a js
scroll to top button for your website. With this
knowledge, we know that you can implement
scrolling to the top of your website to make it
easier for your customers to find important
information. So what are you waiting for? Check
out our other post where we build an Image Format
Converter. Also if you are a fan of Isekai
Anime, check our article on 15 Isekai Anime with
OP mc. Thanks so much for reading. If you have
any doubts, comment and ask us. We always try to
give prompt replies. Keep coding! Ta-da!