Kalle på js funksjon i html-a-tag

[haakl]

Hei!

 

Jeg har et problem når det kommer til å implementere smooth scrolling på websiden min. Jeg er ganske sikker på at javascripten er riktig, men når jeg kaller på den i html-dokumentet vil den ikke kjøre funksjonen.

 

HTML-utsnitt

 

 

<div id="scroll">
<a href="#problemScroll" onclick="scroll('problemScroll'); return false"><img             src="graphics/down_arrow.png" alt="down arrow" /></a>
</div>

 

 

 

JS

 

 

function yPosition() {
if (self.pageYOffset) return self.pageYOffset;
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}

function elementYPosition(eID) {
var element = document.getElementById(eID);
var y = element.offsetTop;
var node = element;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}

function scroll(eID) {
var startY = yPosition();
var stopY = elementYPosition (eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY);
return;
}
var speed = Math.round( distance / 100 );
if (speed >= 20) speed = 20;
var step = Math.round( distance / 25 );
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i = startY; i < stopY; i += step) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step;
if (leapY > stopY) {
leapY = stopY;
timer++;
}
}
return;
}
for ( var i = startY; i > stopY; i-= step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step;
if ( leapY < stopY) {
leapY = stopY;
timer++;
}
}
}

 

 

 

I console får jeg error på at verdien til eID blir null. Av en eller annen grunn setter ikke funksjonen mitt parameter 'problemScroll' som verdi til eID.

 

Uncaught TypeError: Cannot read property 'offsetTop' of nullelementYPosition

@ js.js:12scroll

@ js.js:22onclick

@ index.html:17

Endret 5. november 2015 av haakl