EverWeb Codebox

Anchors

There are two widgets available for creating smooth scrolling anchors. Click the Easy button to get there.

Hyperlink code:  <a href="#anchor-name" class="scroll">Smooth Scroll</a>


Anchor code:  <a id="anchor-name"></a>

The scroll time is in milliseconds and can be changed to increase/decrease the speed.


The HTML for the hyperlink is basically the same with the addition of the class.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

     $(".scroll").click(function(event){          

          event.preventDefault();

          $('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000);

     });

});

</script>

The smooth scrolling version uses jQuery. The anchors are given a class "scroll" and the setup javascript - pasted into the Footer Code box - looks like this...

Smooth Scroll

Internal Link Code: <a name="page-name.html#anchor">Anchor</a>

External Link Code: <a name="http://www.domain-name.com/page-name.html#anchor">Anchor</a>

Anchors can also jump to any point on another page. In this case the URL of the page is followed by the hash sign and the anchor name. The codes for an anchor on the same site and an external one are shown below.

Hyperlink code:    <a href="#anchor-name">Link Text</a>

Anchor code:        <a name="anchor-name"></a>

Jump Anchor:  <p class="anchor">Click <a href="#bottom">HERE</a> to jump to the bottom of the page</p>


Scroll Anchor:  <p class="anchor"><a href="#bottom" class="scroll">Smooth Scroll</a>  To The Bottom Of The Page</p>

If the hyperlink needs to have an underlined, change none to underline.

In both examples, the hyperlink is in a paragraph so the HTML is...

<style type="text/css">

.anchor {font: 15px 'Verdana', Helvetica, sans-serif;color:#000000;margin:0;padding: 0}

.anchor a {text-decoration:none;color:#0000FF}

.anchor a:hover {color: #FF0000}

</style>

Click HERE to jump to the bottom of the page

Using the above code examples will create fairly nasty looking hyperlinks with the browser default styles. The styles used on i page are shown below and should be pasted into the page Head Code box.

Hyperlink Styles

And will look like this...

Specifying a target as "_blank" will make the page open in a new window.

Another target which is useful is "target_top" which is used for hyperlinks in documents that will be inserted in a page using an iframe. This will force the linked document to open in the full body of the browser window rather than in the iframe.

Link Text

<a href="http://www.website.com/page-name.html" target="_blank" title="Tooltip Text">Link Text</a>

The <a> tag in HTML defines a hyperlink. These are pretty much covered in EverWeb by using the Link inspector. The only features missing are the title attribute - which creates the tooltip when a vistor hovers their mouse over the link - and some of the target attributes.

A hyperlink code looks like this...

The HTML <a> Tag

Hyperlinks and Anchors

Here are examples of two types of anchors. The "Jump" anchor will jerk you down the page while the "Smooth Scroll" will slide sedately. Use the "Back to the Top" button to return.

Smooth Scroll To The Bottom Of The Page

Anchors are links normally used in long documents to allow the visitor to jump to specific points.

A normal hyperlink points to the top of a page or document since most of us read things from the top down.

Anchors, on the other hand, point to a place elsewhere in a page or document.

An anchor consists of two parts - a hyperlink and an anchor - which have the same name.

Easy