Animated Scroll To Top

**AboutTime** · 16 September 2012, 05:03 PM

Hey there,

is it possible to implement something like this: http://webdesignerwall.com/tutorials...-scroll-to-top using Web Designer 6?

I must thank everyone for helping my out on my previous threads - its truly amazing, so appreciated. Thank you so much.

**Big Frank** · 17 September 2012, 08:55 AM

Check this out - just put it in a placeholder

http://www.scrolltotop.com/

**AboutTime** · 17 September 2012, 11:49 AM

Originally Posted by Big Frank

Check this out - just put it in a placeholder

http://www.scrolltotop.com/

Hey there Big Frank,

thanks for your reply. I must admit that I'd like the 'Scroll to top' to become visible once you are somewhat down the page - besides, I do like the design of the one I linked to in my first post. Do you know if its possible to implement that?

**Big Frank** · 17 September 2012, 03:18 PM

Yes, it's fairly simple css and javascript that you can simply copy and paste into the appropriate placeholders.

**jamesd** · 17 September 2012, 06:52 PM

Download and unzip the zip folder in your link.
For WD6 place this code into a placeholder and then give it the name <head> using the name tag

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
    
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>

<style>
/*
Back to top button 
*/
#back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    /* background color transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
/* arrow icon (span tag) */
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(index_htm_files/up-arrow.png) no-repeat center center;
    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    /* background color transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}
</style>

Then create a second placeholder (html body) and place the button code. This placeholder needs to be placed within your page.

Code:

<p id="back-top">
        <a href="#top"><span></span>Back to Top</a>
    </p>

You will need to upload the up-arrow.png (found in the downloaded zip folder) into your index_htm_files folder.

**covoxer** · 18 September 2012, 08:17 AM

Here's a simpler alternative. Put following code to the page head code section:

Code:

<script type="text/javascript">
function my_scr2top()
{
   var x=window.pageXOffset;
   var y=window.pageYOffset;
   if(xr_ie)
   {
      x=document.documentElement.scrollLeft;
      y=document.documentElement.scrollTop;
   };
   window.scrollTo(x/2,y/2);
   if(x+y>4) setTimeout("my_scr2top()",50);
};
</script>

Then add following link to the button to start scrolling:

Code:

javascript:my_scr2top()

**Big Frank** · 18 September 2012, 12:37 PM

What annoys me in such situations is a "Back to Top" button on a page that is short and doesn't need one. Sometimes I add a script that measures the length of the page and after a certain length or a certain amount of content, adds the button. It all depends if the site is db driven or is a static site, but in any event, there's no button on short pages which is nice.

**AboutTime** · 19 September 2012, 01:39 PM

Originally Posted by Big Frank

What annoys me in such situations is a "Back to Top" button on a page that is short and doesn't need one. Sometimes I add a script that measures the length of the page and after a certain length or a certain amount of content, adds the button. It all depends if the site is db driven or is a static site, but in any event, there's no button on short pages which is nice.

And that is exactly the special thing with the one I linked - because I completely agree; I do not want the 'to top' to show up until the page reached a certain length.

To the posts above, thank you very much. I think I got an idea, I will test it in a few hours. Thanks again!