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