SmartTop: Intelligent Top links in Author-it

Home » TCPblogs » willsansbury's blog

SmartTop is a script I put together to address a need of a user on the Author-it users list. Debi wanted to place at the bottom of each page in her xHTML help a link that would scroll the frame back to the top of the page. She did not, however, want the link to appear if the entire contents of the frame were visible, as it is redundant and useless then.

SmartTop fixes that by only displaying the top anchor link when the content of the page exceeds the viewport of the frame.

To use SmartTop:

  1. Place this script in the <HEAD> section of the HTML template used by the topic object for which you want to include the top link.
    <script>
    function SmartTop()
    {
    //reset to visible in case of resize

    document.getElementById(’SmartTop’).style.visibility = ‘visible’;
    document.getElementById(’SmartTop’).style.display = ‘block’; //check for presence of scroll bars
    if(document.body.scrollHeight <= document.documentElement.clientHeight)
    {

    //if present, hide top link
    document.getElementById(’SmartTop’).style.visibility = ‘hidden’;
    document.getElementById(’SmartTop’).style.display = ‘none’;
    }
    }

    </script>

  2. Then add this where you want the top link to appear. You can style it however you like using CSS.<div id=”SmartTop”><a href=”javascript:scroll(0,0);”>Top</A></div>
  3. Finally, add a call to SmartTop() to the onLoad and onResize parameters of your<BODY> tag.

That’s it. Follow those steps, and books you publish using this template should show a link to the top of the page only if a vertical scrollbar exists.

If you like and/or use this, please let me know! I’d love to hear that you’re using this in your projects.

by willsansbury