If you see the text "DO NOT TRACK - OPT-IN" below in red - your browsers "Do Not Track" setting is OFF.

DO NOT TRACK - OPT-IN

Plugin Default

Top of the Page is highly configurable.  This page shows the default configuration, and nothing about the plugin is set in stone.   By default, it displays in the bottom right corner - but it has 6 positions (starting points) where it can be assigned: Top and bottom, left center and right.  As a starting point - the button can be moved using CSS.

This demo is "old fashioned" to quote one of the reviews in the JED - by no means is this style set in stone.  Your button can look any way you want it to look - limited only by the capabilities of CSS.

Other examples are linked to the right.  There is no limit to the amount of customization  you can do with this button.

Image and Text

There isn't any reason not to have text and an image.  It just takes some extra styling to place the image where  you want it.  I had to add extra margins to clear the bottom tabs, and extra padding to accommodate the image.

#gototop{
    margin:35px 5px;
    padding:36px 0 0 0;
    background-image:url(/media/media/images/folderup_32.png);
    background-repeat:no-repeat;
    background-position:top center;
text-decoration:none; }

Image Only

Using images is easy.  The plugin has an option to omit the button text (although I had to hide it another way for this demo).  The pitfalls of using images are relatively few.

  1. You should always use absolute paths to your images.  Just because a relative path works for one page, does not mean it will work for all of your pages.
  2. Apply width and height to the element - this should be the same size or larger than your image.  If  you're getting tricky and using sprites, this will be more complicated - but since you're using sprites you probably already know what you're doing.
  3. Your template may set a background image on links (or on link hover) - so you may need to accommodate that in your CSS - as I've done in this example.
  4. For hover images, you really only need to specify the image URL, unless your hover image is a different size than your non-hover image - in which case, apply new width/height to the hover element.
  5. GO NUTS (or not, it's ultimately up to you)

#gototop{
    margin:5px;
    padding:0px;
    background-image:url(/up.png);
background-repeat:no-repeat;
background-position:top left; height:128px; width:128px; }

If you want a hover image, it's easy using the hover selector:

#gototop:hover{
    background-image:url(/up_hover.png);
    background-color:transparent;
}

CSS Arrows

I always wanted to do this because it eliminates 2 resource downloads - Top of the Page is capable!  CSS Arrows - any color/size you like.

#gototop{
    margin:35px 5px;
    padding:0px;
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent; 
    border-right: 25px solid transparent; 
    border-bottom: 25px solid #00a;
}
#gototop:hover{
    border-bottom-color:#090;
}

Additional information

NicePanel creates top and/or bottom module sliders for your pages.  The sliders can be fixed (floating) or absolute (always at the top/bottom).

This is a Custom HTML module displayed within a NicePanel tab.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.

NicePanel tabs are created for each module you add to the tab position (top or bottom).  If you want to add something else, then add it.