Announcement

Collapse
No announcement yet.

HOW TO: Back to top button with smooth scroll and fade-in/out

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • HOW TO: Back to top button with smooth scroll and fade-in/out

    Dynamik Tutorial

    So for all those searching for a possibility to add a back-to-top button that fades in when the visitor scrolls down and performs a smooth scroll to the top when clicked on: Here it is.
    This is the "I don´t want to use a plugin" DWB version.

    In the zip, you´ll find:
    - A text file with instructions where to put what
    - A ready-to-use png file for the button
    - A PSD file (CS6) to create your own button with colors that fit your layout

    Have fun!

    Edit: I you see your button hiding behind slider or videos on smaller screens, add a z-index to the CSS like so (try to increase the number if it still hides):

    Code:
    /* -----Scroll to top button, please check/change url if necessary, change placement if you want----- */
    a.up{
        width:40px;
        height:40px;
        opacity:0.5;
        position:fixed;
        bottom:100px;
        right:50px;
        display:none;
        text-indent:-9999px;
        background: url("images/button-up.png") no-repeat;
        z-index: 9999;
    }
    EDIT 21.7.2016:
    Here´s a skin-integrated version using a Font-Awesome icon instead so you can style it all with CSS and don´t need to edit an image.

    https://gist.github.com/SiGaCode/93b...09c22a07086415
    Attached Files
    Last edited by SiGa; 07-21-2016, 05:25 PM.

  • #2
    Awesome! Works like a charm Thanks for taking the time to put this together.

    You should make this a plugin! LOL

    Comment


    • SiGa
      SiGa commented
      Editing a comment
      Hehehe... nice one!

  • #3
    Awesome Siga thank you

    Comment


    • #4
      No problem, hope it helped!

      Comment


      • #5
        Cool. Re: plugin--you'll need options, like a smiley-face button that transforms to a frowny face as you go down the page.

        Comment


        • SiGa
          SiGa commented
          Editing a comment
          Sure. And while I´m on it, maybe some comic sound for "up" and "down"?

      • #6
        SiGa, thank you very much for sharing your method. I have just successfully used it in my project.

        Comment


        • SiGa
          SiGa commented
          Editing a comment
          Glad it was useful for you!

      • #7
        Thank you for sharing.

        Comment


        • SiGa
          SiGa commented
          Editing a comment
          No problem.

      • #8
        This was exactly what I was looking for - thank you so much for sharing Siga

        Comment


        • SiGa
          SiGa commented
          Editing a comment
          Glad to hear!

      • #9
        not worked on me why help

        Comment


        • SiGa
          SiGa commented
          Editing a comment
          Details please.

      • #10
        im usibg dynamik and did everything exactly as you said but nothing happened and tried to do z-index: 999999;

        Comment


        • areserhat
          areserhat commented
          Editing a comment
          Thanks i did it i am newbie and learning thanks for help

        • SiGa
          SiGa commented
          Editing a comment
          You mean it worked now? Glad to hear!

        • areserhat
          areserhat commented
          Editing a comment
          yes it worked . i was trying to copy paste to image dynamik>images. today i learned we have another file on uploads anyway i choose design settings>>upload image now its working . Thanks again

      • #11
        Thanks Siga for the information. It worked well for me

        Originally posted by SiGa View Post
        Dynamik Tutorial

        So for all those searching for a possibility to add a back-to-top button that fades in when the visitor scrolls down and performs a smooth scroll to the top when clicked on: Here it is.
        This is the "I don´t want to use a plugin" DWB version.

        In the zip, you´ll find:
        - A text file with instructions where to put what
        - A ready-to-use png file for the button
        - A PSD file (CS6) to create your own button with colors that fit your layout

        Have fun!

        Edit: I you see your button hiding behind slider or videos on smaller screens, add a z-index to the CSS like so (try to increase the number if it still hides):

        Code:
        /* -----Scroll to top button, please check/change url if necessary, change placement if you want----- */
        a.up{
        width:40px;
        height:40px;
        opacity:0.5;
        position:fixed;
        bottom:100px;
        right:50px;
        display:none;
        text-indent:-9999px;
        background: url("images/button-up.png") no-repeat;
        z-index: 9999;
        }

        Comment


        • #12
          Just a heads up to tell you there´s a new skin-integrated version of this, using a Font-Awesome icon this time. See "Edit" in the original post above!

          Comment


          • #13
            Hi SiGa I'm testing out smooth scrolling for anchor links in a page on my site but used a plugin to do it (https://wordpress.org/plugins/surbma-smooth-scroll/). The plugin claims to be simple and lightweight but it doesn't provide a 'Back To Top' feature, just the smooth scrolling down to the anchor link.

            I landed on the this post to get the Back To Top button I want to add but now wondering if I should implement the whole thing without a plugin (the smooth scroll + back to top). Do you have a tutorial with both elements?

            Also, just FYI - I tried to click the tutorial link for Scroll To Top in this thread and it goes nowhere (http://cobaltapps.club/forum/main-ca...-and-tutorials)
            Last edited by jenchurch; 04-20-2018, 01:43 PM.

            Comment


            • #14
              Sorry, but no, there is no other related tutorial.

              And yes, there were some changes in this forum through the last years and some links broke due to this. (CobaltApps installed a new forum, anyways....)

              Comment

              Working...
              X