PDA

View Full Version : Anchor points - making the page scroll rather than jump.


tommisauce
10-10-2007, 12:05 PM
Hi folks,

This is a simple enough problem - I am using anchor points on a site. However I have recently seen anchor points being tackled in another way on a particular site, when linking to the anchor point the pages 'scrolls' rather than 'jumps':
http://www.visioncomm.co.uk/main/services/article/translation

How is is possible to do this? I have checked a few known script sites and even had a look on the DW Exchange centre - but haven't dug anything up - any ideas?

Much appreciated.

m1a2x3x7
10-10-2007, 02:02 PM
They are using a java script file called jstarget.js
var JSTarget = {
init: function(att,val,warning) {
if (document.getElementById && document.createElement && document.appendChild) {
var strAtt = ((typeof att == 'undefined') || (att == null)) ? 'class' : att;
var strVal = ((typeof val == 'undefined') || (val == null)) ? 'non-html' : val;
var strWarning = ((typeof warning == 'undefined') || (warning == null)) ? ' (opens in a new window)' : warning;
var oWarning;
var arrLinks = document.getElementsByTagName('a');
var oLink;
var oRegExp = new RegExp("(^|\\s)" + strVal + "(\\s|$)");
for (var i = 0; i < arrLinks.length; i++) {
oLink = arrLinks[i];
if ((strAtt == 'class') && (oRegExp.test(oLink.className)) || (oRegExp.test(oLink.getAttribute(strAtt)))) {
oWarning = document.createElement("em");
oWarning.appendChild(document.createTextNode(strWa rning));
oLink.appendChild(oWarning);
oLink.onclick = JSTarget.openWin;
}
}
oWarning = null;
}
},
openWin: function(e) {
var event = (!e) ? window.event : e;
if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return true;
else {
var oWin = window.open(this.getAttribute('href'), '_blank');
if (oWin) {
if (oWin.focus) oWin.focus();
return false;
}
oWin = null;
return true;
}
},
/*
addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*/
addEvent: function(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() {obj["e"+type+fn]( window.event );}
obj.attachEvent("on"+type, obj[type+fn]);
}
}
};
JSTarget.addEvent(window, 'load', function(){JSTarget.init("rel","external","");});Then they have this in the head of their html calling on the java script

<script type="text/javascript" src="/js/jstarget.js"></script>
<script type="text/javascript">
$(document).ready(function() {$("body").ScrollToAnchors(800,'bounceout')});
</script>

I kind of like the effect so I'm going to test it out and well see how it works.

tommisauce
10-10-2007, 02:12 PM
Cheers for that - I will give it a spin and let you know how I get on - if you can do likewise that would be great.

tommisauce
10-10-2007, 02:34 PM
Well I've given it a shot and it's not working(??) I've attached the jstarget.js to the HMTL page and placed the other code in the head - but still no go. How did you get on?