CODEWITHSUNDEEP
javascriptjqueryhtmlcssonclick
ariel
ariel

Reputation: 3072

How do I use JQuery in coordination with an anchor tag to move the screen to a location?

I've never worked with this before so I am not sure if I apologize if I am using too many words to define what I am looking for.

I want to create a navigation menu in the header where upon clicking a link the screen should slowly move down to that section of the page.

Code structure: 

 <div class="header">
      <a href="#about" class="link">About</a>
      <a href="#contact" class="link">Contact</a>
  </div>
  <div class="container">
       Some content
  </div>
  <div class="section2">
      About
  </div>
  <div class="section3">
      Contact
   </div>

So if a user clicked on About how do I use JQuery to slowly drag them to that section and the same for contact?

Upvotes: 2

Views: 386

Answers (2)

saikiranboga
saikiranboga

Reputation: 81

you could use jquery scrollTo.js script for smooth scrolling

or

you could just link to the section you want to scroll by just providing the id of the section in the href tag,like >>

<a href="#section2" class="link">About</a>

I have also used scrollTo.js in a small website I have written 2 years ago, here is the link ->

http://students.iitmandi.ac.in/~boga_saikiran/

there, when you click the Contact Me button on the top right or Top button on the bottom right you can see a smooth scrolling effect.

The code related to it is >>

(assuming you have jquery js file is included in your head tags)

1) download the scrollTo.js file and place it in your directory where your html file is

2) include this in the head tag

    <script type='text/javascript' src='scrollTo.js'></script>

3) Place these in your javascript script tags inside the head tags

   $(document).ready(function()
    {
      $('#link_id').click(function(e)
         {
           $.scrollTo('#about','slow');
           e.preventDefault();
         });
    });

Upvotes: -1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Just add id's on your div with the section name:

<div id='about' class="section2">
     About
</div>

Then use this code:

$('.link').click(function(){
    $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}) //Will maybe be $(window) instead of html,body.
    return false;
})

Fiddle : http://jsfiddle.net/Hw4L6/

Upvotes: 2

Related Questions