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

D3 transition grouped to stacked columns

D3 transition grouped to stacked columns

By AdventureBear
A Pen by Dan

A Pen by Dan

By PhoxKiD
responsive iframe

responsive iframe

By StinoM
NU - Dashboard

NU - Dashboard

By romstevens
Times Table Circular Graph Shader

Times Table Circular Graph Shader

By n1kk
A Pen by Vivian

A Pen by Vivian

By gor0n
MyBuylist

MyBuylist

By CAIJIN
A Pen by Joshua D Hathcock

A Pen by Joshua D Hathcock

By jdspiral
© 2018 - Copyright CodeSeek.co
contact email