PDA

View Full Version : click button to scroll down scrollbar window



hwoodfilm
Apr 20th, 2009, 05:30 PM
webpage: http://www.bhdc90210.com/cancer.html

i want to add 3 buttons underneath the heading "Skin Cancer Treatments"
Mohs, Total Body Exam, and ABCDs of melanoma.

When a button is clicked I want the browser to scroll down to the corresponding text in the window.

How can i achieve this? Thanks.

David

mikemacx
Apr 20th, 2009, 06:31 PM
What you need are a href links to parts of the page. It's pretty easy. Here are the basics:

Create a Href links with identifiers like so and then place the identifier where you want the browser to scroll down.


<td class="test4">

<a class="small" href="index.html" title="HOME">HOME</a>
<a class="small" href="staffbhdc.html" title="OUR STAFF">OUR STAFF</a>
<a class="large" href="cosmetic.html" title="COSMETIC PROCEDURES">COSMETIC PROCEDURES</a>
<a class="large" href="cancer.html" title="SKIN CANCER">SKIN CANCER TREATMENTS</a>
<a class="small" href="news.html" title="IN THE NEWS">IN THE NEWS</a>
<a class="small" href="office.html" title="OUR OFFICE">OUR OFFICE</a>
<a class="small" href="contact.html" title="CONTACT US">CONTACT US</a>

</td>

<A HREF='#mohs'><font size=2><u>Mohs Micrographic Surgery</u></a></td><TD><A HREF='#moles'><font size=2><u>The ABCD's of Moles & Melanoma</u></a></td><TD><A HREF='#exams'><font size=2><u>Total Body Exams</u></a></td>

<A NAME='mohs'><strong>Mohs Micrographic Surgery</strong><br>

<A NAME='moles'><strong>The ABCD's of Moles & Melanoma</strong><br>

<A NAME='exams'><strong>Total Body Exams</strong><br>
Attached is a general markup of your page to give you an example. Sorry, but it's a little simplistic. :o

VIPStephan
Apr 20th, 2009, 06:46 PM
Attached is a general markup of your page to give you an example. Sorry, but it's a little simplistic. :o

No, no, NOOOO! I get tears in my eyes when I see named anchors. Besides the fact that the above HTML isn’t just simplistic, it’s plain wrong (non-closed anchors, among others) the name attribute has been deprecated for years and should never ever be used (except on form controls). What you should do instead is use the ID attribute in combination with semantic HTML (http://boagworld.com/technology/semantic_code_what_why_how/). This means: if you have a headline, mark it up as headline, not as bold plain text.

This is the proper code for internal links:



<a href="#exams">Total Body Exams</a>


(content here)


<h2 id="exams">Total Body Exams</h2>


You don’t even need an anchor element as reference since the ID functions just as that. If, however, you would link to a word in continuous text then the anchor would be appropriate (but it could really be any element with an ID, e. g. a span):



<a href="#process">Process</a>


(content)


<p>For decades, Mohs micrographic surgery has proven effective in getting to the roots
of skin cancer by combining the surgical removal of cancer with the immediate microscopic
examination of the tumor and underlying diseased tissue. <a id="process">This process</a>
allows dermatologists who are trained in Mohs surgery to see beyond the visible disease
and precisely identify and remove the entire tumor and nothing but the tumor. </p>

mikemacx
Apr 20th, 2009, 10:18 PM
Stephan is correct. I still come from Old Skool coding, which by the way, still works despite deprecation. http://img57.echo.cx/img57/3364/sc0421pv.gif

A div tag is more appropriate, yet only a difference in semantics.