CODEWITHSUNDEEP
jqueryhtml
Brad
Brad

Reputation: 12262

Anchor tag, to go to the beginning of a div class w/ USING jQuery

I want to implement a global anchor type of functionality.

I want to include a link to the main part of the web page, globally by inputting into my header.inc file.

When you select the link, it will scroll to the main part of the page, which is within the div class content-body

<div class="content-body">
  main content
</div>

So it will scroll down to where the div begins.

I want to achieve the anchor tag functionality, but it goes to a div class, not id.

I want to know if there is a way to do this with jQuery. Why I want to do this, is because I can globally implement this throughout the entire existing website.

Upvotes: 3

Views: 37915

Answers (3)

Pjl
Pjl

Reputation: 1812

This may help you.

You can create a small function to make this behavior. Is realy usefull. You cant totally avoid open windows or modals, and things like that. 

 function to_position(divid){
     $('html, body').animate({scrollTop:$(divid).position().top - 50 }, 'slow');
 }

So. you use the function like this.

 to_position('#my_id')
 //or class, or whatever jquery selector
 to_position('.my_class')
 //
 to_position('input[name="lorenzolamas"]')

Upvotes: 9

Buggabill
Buggabill

Reputation: 13901

You could use scrollTop in jQuery. Here is a page that shows this.

Upvotes: 1

slant
slant

Reputation: 935

Well, traditionally this is done by using an id attribute on an element and making the anchor point to that id.

<a href="#main">Go to Main Element</a>

<div id="main"></div>

The hash tag is the key as that indicates that you're wanting to direct the user to somewhere within the same document.

This is, of course, assuming that you are not saying that the class attached to the 'main' element in question is your only option.

Upvotes: 5

Related Questions