jQuery Top of Page

[Matt]

The XHTML

Code: [Select]

<a href="#top" id="top-link">Top of Page</a>
The CSS

Code: [Select]

#top-link  { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }
The jQuery JavaSctipt

Code: [Select]

//plugin
jQuery.fn.topLink = function(settings) {
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 200
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = $(this);
    el.hide(); //in case the user forgot
    $(window).scroll(function() {
      if($(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};

//usage w/ smoothscroll
$(document).ready(function() {
  //set the link
  $('#top-link').topLink({
    min: 400,
    fadeSpeed: 500
  });
  //smoothscroll
  $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,300);
  });
});


and in the file
overall_heater.html

Code: [Select]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.0-min.js"></script>
<script type="text/javascript">
        jQuery.fn.topLink = function(settings) {
                settings = jQuery.extend({
                        min: 1,
                        fadeSpeed: 200,
                        ieOffset: 50
                }, settings);
                return this.each(function() {
                        //listen for scroll
                        var el = $(this);
                        el.css('display','none'); //in case the user forgot
                        $(window).scroll(function() {
                                if(!jQuery.support.hrefNormalized) {
                                        el.css({
                                                'position': 'absolute',
                                                'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
                                        });
                                }
                                if($(window).scrollTop() >= settings.min)
                                {
                                        el.fadeIn(settings.fadeSpeed);
                                }
                                else
                                {
                                        el.fadeOut(settings.fadeSpeed);
                                }
                        });
                });
        };
       
        $(document).ready(function() {
                $('#top-link').topLink({
                        min: 400,
                        fadeSpeed: 500
                });
                //smoothscroll
                $('#top-link').click(function(e) {
                        e.preventDefault();
                        $.scrollTo(0,300);
                });
        });
       
       
        </script>
<style type="text/css">
                #top-link       { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoratio
n:none; border:1px solid green; background:Lightgreen; padding:10px; }
        </style>


bottom of the file

Code: [Select]

<!-- ENDIF -->
                <a href="#top" id="top-link">Top of Page</a>


[Matt]

Changed a few things with this.

First I've split the CSS from the file into the phpBB style sheet common.css. Firefox was reading the inline CSS before the cached CSS file, so was loading the page initially with only half the CSS.

I've also fixed an issue with the link not being fully click able when it was over a forum. To do this, I set the z-index to be one, so it's always at the front

Code: [Select]

#top-link {
        display:none;
        position: fixed;
        bottom: 15px;
        right: 15px;
        cursor: pointer;
        outline: none;
        padding: 6px 10px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 1.2em;
        font-weight: bold;
        background: #7DAC20;
        color: white !important;
        z-index:1;
}

I've changed how it looks as well.

[Matt]

How it looks on Z22SE
[ Guests cannot view attachments ]