![html back to top smoothscroll html back to top smoothscroll](https://4.bp.blogspot.com/-_EgH8nJzp9c/WRIz8HVdZII/AAAAAAAABck/zyYGmppBWfktiOioxVTNtLTa4dflcWwawCLcB/s1600/QQ%25E6%2588%25AA%25E5%259B%25BE20170509172548.jpg)
The solution? To quickly and smoothly scroll the page to the destination content, but take a short time to do so.
![html back to top smoothscroll html back to top smoothscroll](https://www.platinum-celebs.com/news_pic/375/big_05August2010-leelee-sobieski-blue-tank-06-FP_5529776.jpg)
A clear representation of this relationship was the original reason for condensing the multiple sections into a single page, so we have a problem. Because the user doesn't see any of the content between the link they clicked (at the top of the page) and the destination content (at the bottom of the page), they feel lost and the relationship between sections is destroyed. While this default method is fully functional, there's a usability problem: clicking that link makes the user jump instantly to the bottom of the page.
![html back to top smoothscroll html back to top smoothscroll](http://3.bp.blogspot.com/-paQMOlT8fgs/VP8gId5L2sI/AAAAAAAAFuY/rJsQLJQcC18/s1600/Back%2Bto%2BTop%2BButton%2BWith%2BSmooth%2BScrolling.png)
from the top of the page), we link using the hash character ( #) and the name of the destination anchor: This is an invisible element that doesn't appear to visitors in the browser. a Contact form at the bottom of the page), we add a named anchor tag at the start of the section:
![html back to top smoothscroll html back to top smoothscroll](https://codingstatus.com/wp-content/uploads/2020/09/jquery_scroll_top-768x252.jpg)
When we want to link to a specific point on a page, the standard tool that HTML provides is the named anchor. The difference is that links don't direct from one page to another instead, they link to different points on the single page. To provide navigation from section to section on this type of longer page, links are used – just as with the more traditional pages. You've likely seen this principal of condensation in action while browsing the web. In many cases, this arrangement represents the relationship between different sections of information and ideas better than the traditional multi-page model. Instead of having three shorter pages, we can now have a single longer page that provides continuity by displaying all information in direct proximity. This isn't so much an opportunity for verbosity (indeed, the pace of today's society calls for succinctness), as it is an opportunity for condensation. The wide use of broadband connections in today's developed world means that web professionals can create webpages that hold more content than in the past.
#Html back to top smoothscroll code#
Here’s the code needed for this implementation: const links = document.querySelectorAll(".page-header ul a") ĭocument.querySelector(href).Google Faster Connections Beget. This can accept as well the familiar behavior property with the value set to smooth. window.scroll()), there’s also the scrollIntoView() method which applies to DOM elements. The effect should look the same.īeyond the aforementioned scroll methods which are attached to the window object (i.e. Tip: instead of the scroll() method, we could equally have used the scrollTo() and scrollBy() methods. Link.addEventListener("click", clickHandler) Ĭonst offsetTop = document.querySelector(href).offsetTop Here’s the required code: const links = document.querySelectorAll(".page-header ul a") Again here, all we have to do is to set the value of the behavior property to smooth. This property is the JavaScript representation of the scroll-behavior CSS property and can receive the auto (default) and smooth values. Inside this method, we’ll determine the scrolling behavior via the behavior configuration property. The logic for this approach is similar to the previous jQuery implementation. Using the scroll() Methodįirst, we’ll use the scroll() method. Happily enough, it’s much simpler than you might expect. 5. Smooth Scrolling With Vanilla JavaScriptĪt this point, we’ll throw away jQuery and concentrate on two pure JavaScript solutions. My recommendation is to use it only if your project already uses or needs jQuery. On the contrary, it's a reliable solution that will work well on different screens/devices and you can customize the scrolling speed. The major downside of this method is that you have to load an extra JavaScript library. The menu will cover one-fourth of the available width, while the text the remaining three-fourths (the responsive stuff isn’t really important here). The CSS part will be pretty straightforward, nothing extraordinary.įirst, we’ll use CSS Grid to layout the page header. This association (what we refer to as a fragment identifier) will allow us to jump to specific parts of our page. Inside it, we’ll specify a navigation menu and an introductory text.Įach section will have an id whose value will match the href value of a menu link. Let’s get started! 1. Begin With the HTML Markupįor demonstration purposes, we’ll define a header wrapped within a container and four sections. Just to give you an idea of what we’ll discuss during this tutorial, check out one of the demos we’ll be building: