What is the best way to enable smooth-scrolling for anchor links?


#1

One of the HTML lessons mentioned the use of # with a div id, so that clicking the anchor link would scroll to that div/id.
Is there a way to enable smooth-scrolling instead of immediate focus when clicking that anchor link?
I know of coders who would use jQuery plugins to enable smooth scrolling to anchor links - for example this plugin (jQuery Smooth Scrolling Plugin), but is it possible to do it with just HTML5 and CSS alone? Or is additional jQuery code a must to enable?


#2

When the href value is # (hash) it refers to the top of the page at the URL presently in the location bar. It is the unidentified page fragment which is the page itself.

When an element is given an id attribute, it becomes a referrable page fragment.

<div id="fragment">

</div>

We can access that fragment from anywhere within the page, or from anywhere on the web.

<a href="#fragment">Fragment</a>

<a href="https://www.example.com#fragment">example.com Fragment</a>

In either case we could use CSS with no other aids in the transition. Whether the page is just landed upon, or the user is in the page already. From the web, the page could be landed, and then gently scroll to the target fragment, or once present in the page, transition to the fragment from above or below. Look for transition and easing in the CSS 3 recommendations, one thinks.

transition


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.