Smooth Scrolling using JQuery

Posted on
So far, this is the best(for me) smooth scrolling "piece of code" using JQuery. It will use ID as the destination.
Here's the code for demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Smooth Scroll to Top</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript"> 
function ScrollTo(id, duration) 
{ 
      if(!duration) duration = 400; 
      var offset = $('#' + id).offset().top; 
      $('html,body').animate({scrollTop: offset}, duration); 
} 
</script>
</head>

<body>
<center>
<p id="destination" style="font-weight:bold; color:red;">THE DESTINATION</p>
<p>SCROLL DOWN</p>
<p>TO POPULATE BODY</p><p>TO POPULATE BODY</p><p>TO POPULATE BODY</p><p>TO POPULATE BODY</p><p>CLICK THE RED TEXT BELOW</p>
<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 href="javascript:void(0)" onclick="ScrollTo('destination', 500)" style="font-weight:bold; color:red; text-decoration:none" title="Scroll to Top">I'M GOING TO THE DESTINATION</a> <br/>
<a href="javascript:void(0)" onclick="ScrollTo('destination1', 500)" style="font-weight:bold; color:green; text-decoration:none" title="Scroll to Bottom">I'M GOING TO THE DESTINATION 1</a>
<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/>
<p id="destination1" style="font-weight:bold; color:green;">THE DESTINATION 1</p>
</center>
</body>
</html>


You just need to change the id and of course, you need to define it first. Just like the below.
<p id="destination" style="font-weight:bold; color:red;">THE DESTINATION</p>

 <a href="javascript:void(0)" onclick="ScrollTo('destination', 500)" style="font-weight:bold; color:red; text-decoration:none" title="Scroll to Top">I'M GOING TO THE DESTINATION</a>

See it live here.

Popular posts from this blog

Derrick "Rose" withered?

Posted on Post a Comment
Image
Bulls was defeated again, Game 4, with the score 92-101 (OT). Heat leads now the Eastern Conference Finals with 3-1. The next game will be on Bulls home. If Rose was able to shot the 2 free throws, they will win with the score 86-85 during 4th quarter. But he missed, plus he got two chances to finish the game. Unfortunately, guarded by James, he's not able to score. "Tonight, definitely it was on me. I had two opportunities to end the game. Couldn't do it. If anything, learn from it. Too many turnovers. Really was my fault but I'm going to learn from it." -- Rose As an MVP and as a Bull's point guard he plays big role to the game. He knows his fault and even admitted it. After all, without Rose I doubt that Chicago will be on the Finals. He just missed the chance and maybe not their time on the finals. tsk *Note: Chill! I'm not a sports writer. :)
Read more

Set table width to 100% on PDF export in Datatables

Posted on
Image
I've been using DataTables a lot these days, it's good. Actually, it's a very good plug-in for displaying data in table ( haha ), with lots of interaction. Few and should be implemented feature: Can't export multiple table headers API for table width in PDF Export  Adding header and footer for Excel Export DataTables uses pdfmake library for its pdf export module. Sample output of pdf To make the table width 100%, as per pdfmake documentation we should set its width to "*". Here it goes: Edit the datatables JS file, find t.table.widths="auto" , change it to t .table.widths="*" . You might want to change the alignment of the table header also: Find  tableHeader:{bold:!0,fontSize:11,color:"white",fillColor:"#2d4154",alignment:"center" Set the alignment to left. sample output after the tweak
Read more

A Better Archive Page for Blogger

Posted on
Image
This is for me, the better Archive Page. Let's see the how it looks. or you can just click my ARCHIVE PAGE in the navigation bar on top. This has cool feature also: Sort by title (ascending or descending) - by clicking the "POST TITLE" table header. Sort by date (older first or newer first) -  by clicking the "POST DATE" table header. Option to show all post by Label When you hover the post title a snippet of the post will display. Things that it doesn't have, which is acceptable: You can't change the date format You can't change table header unless you edit the script. Here's how to implement it. 1. Create a Page           For New Blogger Interface: Dashboard > Pages > New Page > Blank Page           Put a title, of course, like "Archive". :D 2. HTML Tab > Paste the code below <div id="bp_toc"> Loading TOC. Please wait....</div> <script src="http:/...
Read more