Smooth scroll doesnt scroll at all

[theremotedr]

Hi,
Here is the page http://www.theatticbanwell.co.uk/index.html

I have put the following code in the head section.

         <script type="text/javascript">
var timeOut;
function scrollToTop() {
  if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
    window.scrollBy(0,-50);
    timeOut=setTimeout('scrollToTop()',10);
  }
  else clearTimeout(timeOut);
}
</script>

This is my code applied to a button.

<a href="#" onclick="scrollToTop();return false"><img src="misc/BACK-TO-TOP.png" alt="The Attic Banwell Shabby Chic Items" width="150" height="50" ></a>

Clicking the button does nothing.
Before just with "#header" it worked but jumped to the top.

Please do you see any issues ?

Thanks

[Deadweight]

Well there is an easy way to make it so it doesnt jump. Remove the anchor tag and then add an event listener to the image.
Paste this code in your javascript.

HTMLElement.prototype.scrollTo = function(to, duration, ori = 'h', callback = function() {}) {
	var start = (ori == 'h' ? this.scrollLeft : this.scrollTop),
		change = to - start,
		currentTime = 0,
		increment = 20,
		element = this;
	var animateScroll = function() {
		currentTime += increment;
		var val = Math.easeInOutQuad(currentTime, start, change, duration);
		if ( ori == 'h' )
			element.scrollLeft = val;
		else 
			element.scrollTop = val;
		if(currentTime < duration) {
			setTimeout(animateScroll, increment);
		} else {
			callback();
		}
	};
	animateScroll();
}; // end scrollTo

Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
	if (t < 1) return c/2*t*t + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
};

// Add to the event listener when you click on the image. You will at least know some javascript because i wont type everything out for you. Thanks.
document.getElementById('main').scrollTo(0, 500, 'v');

[theremotedr]

Thanks for the reply.

I know nothing about Javascript.
I spend a long time looking for answers and try to use from there,as you will see from my efforts below of which as we know didnt work.

<img src="misc/BACK-TO-TOP.png" alt="The Attic Banwell Shabby Chic Items" width="150" height="50" onclick="myfunction()" >

<script>
HTMLElement.prototype.scrollTo = function(to, duration, ori = 'h', callback = function() {}) {
	var start = (ori == 'h' ? this.scrollLeft : this.scrollTop),
		change = to - start,
		currentTime = 0,
		increment = 20,
		element = this;
	var animateScroll = function() {
		currentTime += increment;
		var val = Math.easeInOutQuad(currentTime, start, change, duration);
		if ( ori == 'h' )
			element.scrollLeft = val;
		else 
			element.scrollTop = val;
		if(currentTime < duration) {
			setTimeout(animateScroll, increment);
		} else {
			callback();
		}
	};
	animateScroll();
}; // end scrollTo

Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
	if (t < 1) return c/2*t*t + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
};

document.addEventListener("click", function(){
document.getElementById('main').scrollTo(0, 500, 'v');
</script>

	</body>
    <div id="footer">
    </div>

</script>

[Deadweight]

Try this:

<img src="misc/BACK-TO-TOP.png" alt="The Attic Banwell Shabby Chic Items" width="150" height="50" id="totop">

then:

document.getElementById('totop').addEventListener('click', function() {
document.getElementById('main').scrollTo(0, 500, 'v');
});

or if you keep it like this:
<img src="misc/BACK-TO-TOP.png" alt="The Attic Banwell Shabby Chic Items" width="150" height="50" onclick="myfunction()" >

then just add this:

function myfunction() {
document.getElementById('main').scrollTo(0, 500, 'v');
}

[theremotedr]

Deadweight,

I kept the following:
<img src="misc/BACK-TO-TOP.png" alt="The Attic Banwell Shabby Chic Items" width="150" height="50" onclick="myfunction()" >

And then added this,

function myfunction() {
document.getElementById('main').scrollTo(0, 500, 'v');
}

May thanks for your understanding of my disability & time in helping me.