PDA

View Full Version : Smooth scroll doesnt scroll at all



theremotedr
02-08-2018, 07:47 PM
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
02-11-2018, 05:39 AM
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
02-11-2018, 12:57 PM
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
02-11-2018, 01:46 PM
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
02-11-2018, 03:12 PM
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.