Transition when click on

Question

I know that the title isn't good, but I couldn't tell all the story in one short sentence. Sorry about that.
I created a TERMS page (how to use the site and stuff) and I added a little menu for all the parts on the page (such as contribute, law stuff, user respect and more).
So I did this such of thing:

<li> <a href="#contribute">CONTRIBUTE</a> </li>

--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff

<a name="contribute"></a>

--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff

And I want when you click on the CONTRIBUTE link, there will be a transition like WEEBLY did (click at the bottom of first section).

When you click on the CONTRIBUTE link, does it jump to the CONTRIBUTE section? Is it just the transition you're looking for? — Meg, Mar 28 '14 at 12:12
yeah it jumps to the CONTRIBUTE section but it's a little ugly, I want to add a transition — rolory, Mar 28 '14 at 12:12
If you google "Js scroll to id", there are lots of javascript solutions that are already out there. Try this one for starters: http://code-tricks.com/jquery-scroll-to-div/ — Meg, Mar 28 '14 at 12:14
And off-topic, but I would also consider changing your "name" property to be "id", as "name" is generally used for forms: http://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html — Meg, Mar 28 '14 at 12:18

score 0 · Answer 1 · answered Mar 28 '14 at 12:39

<li> <a href="#contribute">CONTRIBUTE</a> </li>
<li> <a href="#other">OTHER</a> </li>

--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff

<!--also <a id="contribute"></a>-->
<p id="contribute">
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
</p>
<!-- also <a id="other"></a>-->
<p id="other">
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
</p>

score 0 · Accepted Answer · edited Aug 07 '20 at 20:06

You should use 'id' attribute at the place of 'name' attribute. as follows:

<li> <a href="#contribute">CONTRIBUTE</a> </li>

<p>--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff</p>

<a id="contribute"></a>

<p>--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff
--stuff--stuff--stuff--stuff--stuff--stuff</p>

Transition when click on

2 Answers2