Knowledge Base

Answers to Common liveSite Questions

Back to Knowledge Base

 
Site Design

Adding Scroll Buttons to your Mobile Pages

Having your site visitors scroll up and down your web pages on their mobile phones is just one more annoyance that may result in them going elsewhere. Here is a quick and easy way to add scroll buttons to your mobile pages to keep your site visitors happy and on your site longer.

With this easy to implement trick (don't be scared by the bits of code - it's a simple cut and paste exercise) your site visitors will be able to smoothly scroll through your pages.  You can even use this for your desktop pages too!

Instructions

1. Download these button icon images and then upload them as Design Files in liveSite:

https://livesite.com/icon_top.png
https://livesite.com/icon_bottom.png

2. Using the built-in Theme Designer, add this CSS code to the Advanced Styling of your (mobile) Theme:

.scrollup {
    width: 40px;
    height: 40px;
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: none;
    text-indent: -9999px;
    background: url('/files/icon_top.png') no-repeat;
    outline: 0;
}
.scrolldn {
    width: 40px;
    height: 40px;
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url('/files/icon_bottom.png') no-repeat;
    outline: 0;
}


3. Add this javascript code to the Source of any of your Page Styles to activate the Pages using those Page Styles:

<script type='text/javascript' src='/livesite/jquery/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
    $(document).ready(function(){
        
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
                $('.scrolldn').fadeIn();
            } else {
                $('.scrollup').fadeOut();
                $('.scrolldn').fadeOut();
            }
        });
 
        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 1000);
            return false;
        });

        $('.scrolldn').click(function(){
            $("html, body").animate({ scrollTop: $(document).height() }, 1000);
            return false;
        });
    });
</script>


4. Add a few named anchors (links) to the top and bottom of your Page content where the scroll buttons will go when the buttons are clicked:

<a class="scrolldn" href="#"></a>

<a class="scrollup" href="#"></a>

TIP: Adding your anchors to your site header and site footer Common or Designer Regions will mean you only have the add the achors in one place to affect many or all your site pages.
 

 


 
Add Feedback:
Was this page helpful? Please let us know how we can improve it.
Please login or register to add your feedback.