Announcement

Collapse
No announcement yet.

how to add button - back to top of page

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    how to add button - back to top of page

    New on the forum and just oploaded my new store this morning.

    As the title says. I want a button you can click that takes you to the top of the page. At the moment the button reads store top which then switches to a page showing all the product catalogues. I just want the customer to be able to go from the bottom to the top of the page, not change the page alltogether.

    Which button on the navigation icon list is that one?

    Fridat
    Tags: None
    #2
    Welcome, Frida.

    Which button on the navigation icon list is that one?
    None of them. You have to make your own. Luckily it's easy.

    Not much point having one on the navigation bar as that's usually at the top of the page anyway. You want one near the bottom surely. Here's one way that will put such a link on every page:-

    In your Overall Layout, just after the <body .....> line, put the following:

    <a name="pagetop"></a>

    Where you want the button put:

    <a href="#pagetop">Top of page</a>

    That was a simple text link but you could have a button like:

    <input type="button" value="Top of page" onclick="location.href='#pagetop';"/>

    Or make up an image and use that:

    <a href="#pagetop"><img src="pagetopimage.gif" alt="Page Top"/></a>
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment

      #3
      You could do it this way:

      Create a fragment at the top of the page in question. Surround the fragment title with a tag like this:

      !!<<a name="top">fragment title</A> >!!

      Then create another fragment at the bottom of the page with no text, just a title like "Back to Top" and surround the title with these tags:

      !!<<a href="#top">Back to top</A> >!!

      Or just do it with text anchor tags and no fragments.
      Reusable Snore Earplugs : Sample Earplugs - Wax Earplugs - Women's Earplugs - Children's Earplugs - Music Earplugs - Sleep Masks

      Comment

        #4
        <a name="pagetop"></a>

        Where you want the button put

        <a href="#pagetop">Top of page</a>

        Did that but it takes you to the bottom of the page, not the top Where am I going wrong?

        FridaT

        Comment

          #5
          Where you've added it is where you will be taken to, so one suspects you've not put it in the right place. With no URL or info on what you did exactly, we are merely guessing though.

          Comment

            #6
            OK obviously put it in the wrong place see below. Where should it go?
            (I did say I am new to this!
            FridaT
            <style type="text/css">
            body {
            background-image: url('theme_palette1.gif');
            }
            </style>


            <actinic:variable name="JavaScriptFunctions" />

            <script type="text/javascript"><!--//--><![CDATA[//><!--

            sfHover = function() {
            var sfEls = document.getElementById("corporate_cart_login_menu").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
            }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);

            sf1Hover = function() {
            var sfEls = document.getElementById("corporate_top_menu").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
            }
            }
            if (window.attachEvent) window.attachEvent("onload", sf1Hover);

            //--><!]]></script>

            </head>

            <body onload="<actinic:variable name="OnLoadScript" value="PreloadImages" />">
            <p>&nbsp;</p>
            <!-- header -->
            <div id="corporate_main_container_menu">
            <div id="corporate_main_structure_menu">
            <!-- logo -->
            <div id="corporate_logo_image">
            <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22">
            <actinic:variable name="BrochureLogoImage" />
            </actinic:block>
            <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22">
            <actinic:variable name="CompanyLogoImage" />
            </actinic:block></div>

            <!-- cart login menu -->
            <ul id="corporate_cart_login_menu">
            <li><a class="cart" href="<actinic:variable name="CartLinkText" />"><actinic:variable name="CartText" /></a></li>
            <li>
            <actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsGoogleAnalyticsEnabled%22%20%2f%3e%20%3d%3d%20false%29%20%20OR%20%28%3cactinic%3avariable%20name%3d%22IsSSLUsedForEssentialPages%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22IsSplitSSLSubdomain%22%20%2f%3e%20%3d%3d%20true%29">
            <a href="<actinic:variable name="OrderLinkText" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22RemoveCustomFrameInCheckout%22%20%2f%3e%20%3d%3d%20True" >target="_top" </actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22RemoveCustomFrameInCheckout%22%20%2f%3e%20%21%3d%20True" >target="_self" </actinic:block>><Actinic:Variable Name="CheckOutText"/></a>
            </actinic:block>
            <actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsGoogleAnalyticsEnabled%22%20%2f%3e%20%3d%3d%20true%29%20%20AND%20%28%3cactinic%3avariable%20name%3d%22IsSSLUsedForEssentialPages%22%20%2f%3e%20%3d%3d%20true%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22IsSplitSSLSubdomain%22%20%2f%3e%20%3d%3d%20false%29">
            <a href="<actinic:variable name="OrderLinkText" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22RemoveCustomFrameInCheckout%22%20%2f%3e%20%3d%3d%20True" >target="_top" </actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22RemoveCustomFrameInCheckout%22%20%2f%3e%20%21%3d%20True" >target="_self" </actinic:block> <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Checkout Link" />><actinic:variable name="CheckOutText" /></a>
            </actinic:block>
            </li>
            <li class="items_value"><actinic:variable name="ShoppingCartSummary" value="Shopping Cart Summary In A Line" /></li>
            <Actinic:NOTINB2B>
            <li><a class="login" href="<actinic:variable name="LoginPageURL" />"><actinic:variable name="LoginText" /></a></li>
            </Actinic:NOTINB2B>
            </ul>
            <!-- end cart login menu -->

            <div id="corporate_main_structure_menu_padding">
            <div id="corporate_main_structure_menu_background">
            <!-- main menu -->
            <ul id="corporate_top_menu">
            <li><actinic:variable name="NavigationIcon" value="Home Basic Link" /></li>
            <li><actinic:variable name="NavigationIcon" value="Enter Shop Basic Link" />
            <!-- flyout menu -->
            <ul>
            <actinic:block type="TopLevelSectionList" >
            <li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li>
            </actinic:block>
            </ul>
            </li>
            <li><actinic:variable name="NavigationIcon" value="Search Basic Link" /></li>
            <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22" >
            <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
            <li><actinic:variable name="NavigationIcon" value="Store Top Basic Link" /></li>
            <li><actinic:variable name="NavigationIcon" value="Up A Level Basic Link" /></li>
            </actinic:block>
            </actinic:block>
            <li><actinic:variable name="NavigationIcon" value="Terms Basic Link" /></li>
            <li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
            </ul>
            <!-- end main menu -->

            <!-- search menu -->
            <ul id="corporate_menu_search">
            <form name="simplesearch" method="get" action="<actinic:variable name="OnlineScriptURL" value="Search Script URL" />">
            <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
            <!-- Hidden field when in trial mode -->
            <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
            </actinic:block>
            <input type="hidden" name="page" value="search" />
            <input type="hidden" name="PR" value="-1" />
            <input type="hidden" name="TB" value="A" />
            <li class="search_box"><input align="top" class="main_search_box" name="SS" type="text" value="search for ..." onfocus="this.value='';"></li>
            <li class="search_box_button"><input type="submit" class="button" name="ACTION" value="<actinic:variable name="QuickSearchButtonText" />"></li>
            </form>
            </ul>
            <!-- end search menu -->
            </div>
            </div>
            </div>
            </div>
            <!-- end header -->

            <!-- central page content -->
            <div id="corporate_main_container">

            <div id="corporate_banner" style="background-image:url('corporate_banner_bg.gif');"><p><actinic:variable name="HeaderText" /></p></div>

            <div id="corporate_main_structure_page_content_container">

            <!-- left hand column -->
            <div id="corporate_main_structure_left_col_container">

            <h1>Main Pages</h1>
            <div class="corporate_pages_menu">
            <ul>
            <actinic:block type="BrochurePagesList" >
            <li><actinic:variable name="BrochurePageLink" value="Simple Brochure Page Link" /></li>
            </actinic:block>
            </ul>
            </div>

            <actinic:variable name="BestSellerListSidebar" value="Corporation Best Sellers List" />

            <actinic:variable name="NewProductListSidebar" value="Corporation New Products List" />

            <actinic:block if="%3cactinic%3avariable%20name%3d%22CaptureCoupon%22%20%2f%3e">
            <div style="padding: 3px;">
            <actinic:variable value="Sidebar Coupon Field" name="CouponEntryField" if="%3cactinic%3avariable%20name%3d%22CaptureCoupon%22%20%2f%3e" />
            </div>
            </actinic:block>
            </div>


            <!-- end left hand column -->

            <!-- right hand column -->
            <div id="corporate_main_structure_page_right_col_container">

            <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22">
            <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
            <div id="corporate_breadcrumbs">
            <p><actinic:variable name="ParentSectionListTop" value="Compact Parent Section List" /></p>
            </div>
            </actinic:block>
            </actinic:block>

            <div id="corporate_main_structure_page_right_col_container_content">
            <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
            <!-- When logged in, this gives the company name, username and a login link -->
            <actinic:variable name="NowServing" /><actinic:variable name="CurrentAccount" /><actinic:variable name="LogoutSimple" />
            </actinic:block>
            <div align="center">
            <actinic:variable name="HeaderFooter" value="Header Text" />
            </div>

            <actinic:variable name="INNERLAYOUT" />
            <a name="pagetop"></a>
            <a href="#pagetop">Top of page</a>

            <div align="center">
            <actinic:variable name="HeaderFooter" value="Footer Text" />
            </div>

            <actinic:variable name="ReferrerLink" />
            </div>
            </div>

            <br clear="all">
            </div>
            </div>
            <!-- end central page content -->

            <!-- footer -->
            <div id="corporate_main_structure_footer">
            <p><span class="text_menu_no_space">© 2009 Turner Engineering div of Agency & General Investment Co Ltd. Reg in England No 1115015. Reg Office: BR1 3RA
            VAT No GB 210 9301 15</span>&nbsp; <a href="<actinic:variable name="SendMailPageLink" />" class="link_footer"><actinic:variable name="SendMailText" /></a> | <a href="<actinic:variable name="InfoURL" />" class="link_footer">Privacy Policy</a> | <a href="<actinic:variable name="InfoURL" />" class="link_footer"><actinic:variable name="InfoText" /></a></p>
            </div>
            <!-- end footer -->
            <p>&nbsp;</p>
            <actinic:variable name="GoogleAnalyticsMarkup" value="Google Analytics Tracking Code" />
            </body>

            </html>

            Comment

              #7
              Hmm you're putting the link in the same place that the anchor is, you're already there, so would never need to use it like that. Remember one part of the code denotes where you go to, the other is what you click to get there, so if they both in the same place, that's like standing outside your house and calling a taxi to take you home.

              This part:

              <actinic:variable name="INNERLAYOUT" />
              <a name="pagetop"></a>
              <a href="#pagetop">Top of page</a>

              could be done as:

              <a name="pagetop"></a>
              <actinic:variable name="INNERLAYOUT" />
              <a href="#pagetop">Top of page</a>

              Comment

                #8
                I gathered that is where I was going wrong.

                Are you saying that if I replace this
                <actinic:variable name="INNERLAYOUT" />
                <a name="pagetop"></a>
                <a href="#pagetop">Top of page</a>

                With this
                <a name="pagetop"></a>
                <actinic:variable name="INNERLAYOUT" />
                <a href="#pagetop">Top of page</a>

                It will work?

                Comment

                  #9
                  Originally posted by Fridat View Post
                  It will work?
                  I certainly hope so, why not try it and find out?

                  Comment

                    #10
                    It works! Thank you !

                    Althought it does not show the main header when back to top but at least goes to the top of the parts lists.

                    http://www.turnerengineering.co.uk/index.html

                    Fridat

                    Comment

                      #11
                      Althought it does not show the main header when back to top
                      It will if you follow my first post (#2):-

                      In your Overall Layout, just after the <body .....> line, put the following:

                      <a name="pagetop"></a>

                      Just look for the line starting <body and put it after that line.

                      In your #6 post it's the line:

                      <body onload="<actinic:variable name="OnLoadScript" value="PreloadImages" />">
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment

                      Previous template Next
                      Working...
                      X