Results 1 to 5 of 5

Thread: Smooth scroll doesnt scroll at all

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default Smooth scroll doesnt scroll at all

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

    I have put the following code in the head section.

    Code:
             <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.

    Code:
    <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

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    476
    Thanks
    8
    Thanked 52 Times in 50 Posts

    Default

    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.

    Code:
    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');
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. The Following User Says Thank You to Deadweight For This Useful Post:

    theremotedr (02-11-2018)

  4. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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.

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

  5. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    476
    Thanks
    8
    Thanked 52 Times in 50 Posts

    Default

    Try this:
    Code:
    <img src="misc/BACK-TO-TOP.png" alt="The Attic Banwell Shabby Chic Items" width="150" height="50" id="totop">
    then:
    Code:
    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:
    Code:
    function myfunction() {
    document.getElementById('main').scrollTo(0, 500, 'v');
    }
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  6. The Following User Says Thank You to Deadweight For This Useful Post:

    theremotedr (02-11-2018)

  7. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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,

    Code:
    function myfunction() {
    document.getElementById('main').scrollTo(0, 500, 'v');
    }
    May thanks for your understanding of my disability & time in helping me.

Similar Threads

  1. Scroll not smooth as on other page.
    By theremotedr in forum HTML
    Replies: 0
    Last Post: 06-04-2015, 09:53 PM
  2. Slider Doesnt Scroll
    By Deadweight in forum JavaScript
    Replies: 0
    Last Post: 04-17-2014, 02:12 AM
  3. Resolved how to scroll up and down the page smooth?
    By davelf in forum HTML
    Replies: 3
    Last Post: 05-04-2010, 06:59 AM
  4. Create smooth scroll?
    By jerdy in forum JavaScript
    Replies: 10
    Last Post: 01-27-2010, 10:36 PM
  5. Replies: 0
    Last Post: 10-22-2007, 04:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •