Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

HammaadM

Member
  • Posts

    21
  • Joined

  • Last visited

Community Answers

  1. HammaadM's post in How can I add a "Scroll to top" button? was marked as the answer   
    Edit the Footer
    Go to your site’s footer area – see How do I add content to the Footer of my site? Add a Code Block Make sure it’s set to HTML and the Display Source option is unchecked Add this code: <a href="#" class="scrollup">Scroll</a> If you don’t want any animation just leave it at this, but if you want some fading animation carry on following along!
    CSS Editor
    Go to the CSS Editor – to see how to get to it, take a look at Using the CSS Editor.
    Paste in the following:
    .scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 50px; right: 100px; display: none; text-indent: -9999px; background: url('icon_top.png') no-repeat; }
    Replace icon_top.png with your scroll up button and you can mess with the exact positioning with the values for right and bottom i.e. increasing the value for right to 110px will mean the icon will be 110px from the right edge of the screen.
    Page Header Code Injection
    Paste this into your site’s Page Header Code Injection, for how to get to it see the article Using Code Injection:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>
    Working Example
    You can see it in action in this JSFiddle – Scroll to top.
    Hope this helps.
×
×
  • Create New...