Announcement

Collapse
No announcement yet.

link to top in every post

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    link to top in every post

    Hello. I recently upgraded from vB 3.8.8 to vB 5.4.1. One modification we used in 3.8 added a link in every post that takes the user to the top of the page. Really, really would like to put the same link in the footer of every post, near LIKE. We were spoiled by it and can't live without it now.

    Is there a relatively easy way to do this in vB 5.4.1?

    Any help is appreciated!!

    #2
    I'll check.

    Comment


      #3
      Thank you, hopefully it's simple!!

      Comment


        #4
        What about an easier solution? A floating button that travels down the page as you scroll. You could set it to be near the bottom of the post and as they scroll down it would just follow down to the bottom of the next post etc

        I did a static HTML module for that. Real simple and works great for my site

        Comment


        • Mitch
          Mitch commented
          Editing a comment
          I'm all ears but on the cloud as well
          Thanks

        #5
        That could work, can you share how to implement?

        Comment


          #6
          ok so I'm on the cloud version and can only do little things via html modules or ad modules and this is one handy feature that I have used for a while now, works great on mobile too

          so go to edit page and drop in a static html module anywhere you want, it won't matter placement in terms of the other modules b/c this one will get just put on the page wherever you place it, I'll explain later

          In the Title, put whatever you want...I use "Go To Top". It's a title so it won't have any effect on the operation of this feature.

          In the Module HTML, put the following:

          Code:
          <style>
          body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
          }
          
          #myBtn {
            display: none;
            font:  small-caps bold 12px Arial,sans-serif;
            position: fixed;
            bottom: 100px;
            right: 30px;
            z-index: 99;
            font-size: 12px;
            border: 2px solid #D2D2D2;
            outline: none;
            background-color: #990000;
            color: white;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
          }
          
          #myBtn:hover {
            background-color: #FFFFFF;
            border: 2px solid #990000;
            font-size: 12px;
            color: #990000;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
          }
          </style>
          </head>
          <body>
          
          <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
          
          
          <script>
          // When the user scrolls down 20px from the top of the document, show the button
          window.onscroll = function() {scrollFunction()};
          
          function scrollFunction() {
              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                  document.getElementById("myBtn").style.display = "block";
              } else {
                  document.getElementById("myBtn").style.display = "none";
              }
          }
          
          // When the user clicks on the button, scroll to the top of the document
          function topFunction() {
              document.body.scrollTop = 0;
              document.documentElement.scrollTop = 0;
          }
          </script>
          This is all you have to do. Now to edit placement, in the #myBtn feature, there is a variable bottom with the value "bottom = 100px;" play with that til you get it where you want it on the page, (i.e. close to bottom of the post) and you can do the same with the variable right that has the value "right = 30px;" play with that as you see fit to give you the location of the button.

          Under #myBtn, you can play around with the following variables to change colors, borders, radius etc.

          font-size: 12px;
          border: 2px solid #D2D2D2;
          outline: none;
          background-color: #990000;
          color: white;
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;

          Under #myBtn:hover, you can do the same with these variables

          background-color: #FFFFFF;
          border: 2px solid #990000;
          font-size: 12px;
          color: #990000;
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;

          From there, any further customization you're looking for you'd just have to add it in the <style> </style> tags. These style tags use the same CSS variables you customize your site using additional CSS.

          I added some comments in the javascript so you know what each step does. The button won't appear until you scroll down 20 pixels, on my site that's great but if you want to change that just modify the line:

          Code:
          function scrollFunction() {
              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                  document.getElementById("myBtn").style.display = "block";
              } else {
                  document.getElementById("myBtn").style.display = "none";
              }
          }
          change 20 to whatever you want

          Hope you enjoy it, such a great feature that I have been using and my users love the functionality. Being on the cloud, we are very limited so you have to be a little imaginative to make some things happen.

          Comment


            #7
            The <body> tag (and its associated CSS) is not needed as every page already has it.

            Comment


            • pgreenway
              pgreenway commented
              Editing a comment
              thanks glenn, I remember you saying that before...think I had done this module before I posted the breadcrumbs and dropdown selectors where you mentioned it before

              corrected it like the others

            #8
            Another great Mod
            Thanks I love it

            Comment


              #9
              I just noticed this box on the bottom from this mod. How do I get rid of that?

              Comment


                #10
                That can be hidden via CSS. I’ll find the CSS I used and post it later.

                Comment


                  #11
                  Code:
                  #widget_202 .b-icon__toggle-collapse {
                    display: none;
                  }
                  
                  #widget_202 .b-module.canvas-widget.default-widget.custom-html-widget {
                    border: none;
                    background-color: #FFFFFF;
                  }
                  
                  #widget_202 .channel-description {
                    display: none;
                  }
                  
                  #widget_202 .widget-header {
                    display: none;
                  }
                  
                  #widget_202 .widget-header h1 {
                    display: none;
                  }
                  
                  #widget_202 .widget-header {
                    background: none 0 0,#FFFFFF;
                  }
                  
                  #widget_202.b-module.canvas-widget.default-widget.custom-html-widget {
                    border: none;
                    background-color: #FFFFFF;
                    padding: 0;
                    margin-top: -10px;
                  }
                  
                  
                  #widget_202 .widget-header .h-clearfix {
                  
                    display: none;
                  }
                  
                  #widget_202 .widget-header-divider {
                    display: none;
                  }
                  
                  
                  #widget_202 .canvas-layout-container .canvas-widget .widget-header {
                    border: none;
                  }
                  change the number (202) to the widget assigned to the static html module you used and this will get rid of all of that or change colors as you'd like if you have a different color forum that is not a white background (#FFFFFF)

                  Comment


                  • Mitch
                    Mitch commented
                    Editing a comment
                    Thanks for that it worked out nice. The users love the mod

                  #12
                  Isn't this highly-dependent on browser/display size as to where the button might appear? I tested this out and resized my browser and the button wound up appearing in the reply itself.

                  Glenn, I'm still looking for a TOP link next to the Like feature in each post. Please let me know if interested.

                  Thanks

                  Comment


                  • Mitch
                    Mitch commented
                    Editing a comment
                    I would go for that as well if Glenn can do it.
                    The mod posted works well on all the browsers I tried. It is not appearing in the reply

                  #13
                  Originally posted by pgreenway View Post
                  Code:
                  #widget_202 .b-icon__toggle-collapse {
                  display: none;
                  }
                  
                  #widget_202 .b-module.canvas-widget.default-widget.custom-html-widget {
                  border: none;
                  background-color: #FFFFFF;
                  }
                  
                  #widget_202 .channel-description {
                  display: none;
                  }
                  
                  #widget_202 .widget-header {
                  display: none;
                  }
                  
                  #widget_202 .widget-header h1 {
                  display: none;
                  }
                  
                  #widget_202 .widget-header {
                  background: none 0 0,#FFFFFF;
                  }
                  
                  #widget_202.b-module.canvas-widget.default-widget.custom-html-widget {
                  border: none;
                  background-color: #FFFFFF;
                  padding: 0;
                  margin-top: -10px;
                  }
                  
                  
                  #widget_202 .widget-header .h-clearfix {
                  
                  display: none;
                  }
                  
                  #widget_202 .widget-header-divider {
                  display: none;
                  }
                  
                  
                  #widget_202 .canvas-layout-container .canvas-widget .widget-header {
                  border: none;
                  }
                  change the number (202) to the widget assigned to the static html module you used and this will get rid of all of that or change colors as you'd like if you have a different color forum that is not a white background (#FFFFFF)

                  Can more than one widget number be added to this code? Or do you need a whole new code for each one?

                  If it can be added can you show an example

                  Thanks

                  Comment

                  Working...
                  X