Window Scrolling jQuery

In this example below you will see how to do a Window Scrolling jQuery with some HTML / CSS and Javascript

I know it's basic simple stuff but I'm testing :-)

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Window Scrolling jQuery</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  Title<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><span id="con">Content</span><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="click_top">goto Top</a>
<a id="click_con">goto content</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/adamboutcher/window-scrolling-jquery-yBADK */
a { border:1px solid #555;padding:3px;border-radius:3px; }

/*Downloaded from https://www.codeseek.co/adamboutcher/window-scrolling-jquery-yBADK */
var c = $("#con").offset();
$(document).ready(function() {
  c = $("#con").offset();
});
$(window).resize(function() {
  c = $("#con").offset();
});

$('#click_top').click(function(){
  $("html, body").animate({ scrollTop: "0px" });
});
$('#click_con').click(function(){
  $("html, body").animate({ scrollTop: c.top+"px" });
});

Comments