smooth href scrolling

In this example below you will see how to do a smooth href scrolling with some HTML / CSS and Javascript

This shows a basic jquery scrolltop method which makes the smooth page scrolling to any href.

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>smooth href scrolling</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" id="header">
  The header
</div>
<div class="container">
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
</div>
<div class="container">
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
</div>
<div class="container">
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
</div>
<footer class="footer">
  This is the footer
</footer>
<a href="#header" class="scroll-link">
  Top
</a>
  
  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/-HAN-/smooth-href-scrolling-uGcxF */
body
{
  margin:0;
}
.header, .footer
{
  background-color:#d0d0d0; 
  padding:25px;
}
p
{
     background-color:#e3e3e3;
      padding:10px;
  border-radius:12px;
}


/*Downloaded from https://www.codeseek.co/-HAN-/smooth-href-scrolling-uGcxF */
$(function()
 {
  $('.scroll-link').click(
    function(e)
    {
      e.preventDefault();
      //path of the href
      var path = $(this).attr('href');
      //position of the href path
      var pos = $(path).offset().top ;
      //animate to scroll the body
      $('html,body').animate({
        scrollTop : pos+'px'
      },400);
      
      
    })
})

Comments

More from -HAN-

A Pen by Rohan Puri

A Pen by Rohan Puri

By -HAN-
canvas demo

canvas demo

By -HAN-
A Pen by Rohan Puri

A Pen by Rohan Puri

By -HAN-
A Pen by Rohan Puri

A Pen by Rohan Puri

By -HAN-

You Might Also Like

anuglar+svg+tweenmax

anuglar+svg+tweenmax

By sgfslong
ITP 104 - 09-26-17 - forms.html

ITP 104 - 09-26-17 - forms.html

By nayeon
Loading Amiation

Loading Amiation

By Arif_Iqbal
Vue &amp; GSAP

Vue & GSAP

By Sixl
nicehashe api

nicehashe api

By casper-man
A Pen by Tanmay

A Pen by Tanmay

By tanmay7270
Jim and Lori

Jim and Lori

By jessegavin
Slide down/up with transform scale

Slide down/up with transform scale

By nanovisor
© 2018 - Copyright CodeSeek.co
contact email