SHOW ANNOUNCEMENT ▼

Announcement: We will be soon releasing New Section for CA Students and Coupon Codes. Liked Us? Press

Thursday, March 22, 2012

Smooth Scrolling Sliding Effect for Anchor Links | YBT

Smooth Scrolling Sliding Effect for Anchor Links Q. What are Anchor Text Links & what purpose does it serve ?

A. Anchor links is a tool which helps user to navigate a webpage from one point to other points. Sometimes, a post/article may be too big which may be inconvenient for the user. So an Index in the beginning can help the user to directly point to different sections of that article.

We can create anchor text links by providing two types of effects -

1. Anchor Text Link – Jump Break (Instant Jump) using simple HTML

2. Anchor Text Link – Smooth Scrolling Sliding Effect using JQuery

The most popular among the web designers, bloggers & surfers is the smooth scrolling effect for comfortable navigation across the web page.


A. Create Anchor Text Link – Jump Break using simple HTML

1. For applying Anchor text link, Go to Source Code of your Blog Post.

2. Locate the TEXT which will point to different sections of your post/article. (It may be your Contents/Index of the Article). For e.g. In my case, I will create Anchor linking on

“1. Anchor Text Link – Jump Break (Instant Jump) using simple HTML”

3. Just Before the desired TEXT, apply the following syntax as follows -

<a href=“#JumpBreak”>1. Anchor Text Link – Jump Break (Instant Jump) using simple HTML</a>

4. Now Go to the point of your article where you would like to jump to when the Anchor Link is clicked upon. For e.g. in my case, I will go to the point “A. Create Anchor Text Link – Jump Break using simple HTML”. Apply following syntax here -

<a id=“JumpBreak”>A. Create Anchor Text Link – Jump Break using simple HTML</a>

5. That’s it, Save your post & check if everything is working properly. You can also “Create Back to Top” link by following same method. Apply following syntax for going back to your Index/Content/Menu section of your Post.

After your article completes, you can provide “Back to Top” link by applying this code –
<a href=“#top”>Back to Top</a>

Go to your Contents/Menu/Index Page of your post & just above it, apply the following code -
<a id=“top”></a>

Back to Top

B. Create Anchor Text Link – Smooth Scrolling Sliding Effect using JQuery

1. Download a JavaScript code. Click here to download the file.

2. Upload the file to your Hosting A/c. If you do not have any hosting account, then you can host your file to Google Code. Fill up the form with details as per the screenshot below (Click on images to Enlarge):

Google Project Hosting Google Hosting Download

3. After uploading the Javascript file to your Hosting A/c or Google Code Hosting servers, Go to that file & note down its destination URL. Screenshot is attached below:

URL of the Download


4. Go to your Blog –> Template –> Backup/Restore –> Download XML file for Safety

5. Go to your Blog –> Template –> Edit HTML –> Proceed

6. Paste this code just below <head> tag as follows -

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/>
<!--JQuery Anchor Link Sliding Effect Script START //-->
<script src='Your Link of Javascript uploaded' type='text/javascript'/>
<!--JQuery Anchor Link Sliding Effect Script END //—>
 

7. All done, Save your post & Refresh to see the beauty of sliding effect of Anchor Link Texts.

Back to Top

onebit_34 Related Posts
onebit_31 Facebook Like Box Widget for Blogger | YourBloggingTips
onebit_31 How to Create a Facebook Like Page for Blogger | YourBloggingTips
onebit_31 How to Host your files free of Cost using Google Code Project | YourBloggingTips

Email-Icon If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!
 

0 comments:

Post a Comment

If you like the post, please share it or reply to me

Share

YourBloggingTips Author

My Photo

Nihit Dalmia is an Entrepreneur, Professional Chartered Accountant, Blogger, & Innovator residing in Mumbai, India. Studied from University of Pune. My Ultimate Passion - Keep Innovating, Helping the community, Watching Movies, TV Shows & Travelling around. My Ultimate Motto - Work hard, Respect Other's work, Have patience & Share with others.

Pageviews

Aquarium (Click n Play)