Announcement

Collapse
No announcement yet.

Grid Add Floating Back-to-Top-Button

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

  • Grid Add Floating Back-to-Top-Button

    Hello to all the forum, I have a very long Grid that contains images and text, I would like to add a floating Back to Top Button, I found several examples in internet,I insert the code attached in onApplicatioInit. But nothing happens.

    Can anyone tell me where is the problem.

    Thank you for your reply.

    Link: http://www.yourwebtech.info/tutorial...n-with-jquery/

    Here is the code:

    $_Back_To_Top="
    <style>
    .to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    text-decoration:none;
    background: #FFFFFF;
    color: #454440;
    padding: 10px;
    border-radius: 5px;
    display: none;
    }
    </style>

    <script src='../../../js/jquery.min.js'></script>

    <a href='#' >
    <img src='../../../file/img/up-arrow.png' alt='back-to-top'>
    </a>

    <script>
    jQuery(function($) {
    //lets handle the button click event
    $('.to-top-btn').on('click', function(e) {
    $('body, html').stop().animate({scrollTop: 0}, 'slow', 'swing');
    e.preventDefault();
    });

    //lets show the button when the page scroll to about 400 pixels
    //change the value to your desired offset
    $(window).scroll(function() {
    if($(window).scrollTop() > 400){
    //show the button when scroll offset is greater than 400 pixels
    $('.to-top-btn').fadeIn('slow');
    }else{
    //hide the button if scroll offset is less than 400 pixels
    $('.to-top-btn').fadeOut('slow');
    }
    });
    });
    </script>
    ";

    echo $_Back_To_Top;
    Last edited by multisystems2; 02-06-2016, 11:39 PM.

  • #2
    Here is the code:

    $_Back_To_Top="
    <style>
    .to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    text-decoration:none;
    background: #FFFFFF;
    color: #454440;
    padding: 10px;
    border-radius: 5px;
    display: none;
    }
    </style>

    <script src='../../../js/jquery.min.js'></script>

    <a href='#' >
    <img src='../../../file/img/up-arrow.png' alt='back-to-top'>
    </a>

    <script>
    jQuery(function($) {
    //lets handle the button click event
    $('.to-top-btn').on('click', function(e) {
    $('body, html').stop().animate({scrollTop: 0}, 'slow', 'swing');
    e.preventDefault();
    });

    //lets show the button when the page scroll to about 400 pixels
    //change the value to your desired offset
    $(window).scroll(function() {
    if($(window).scrollTop() > 400){
    //show the button when scroll offset is greater than 400 pixels
    $('.to-top-btn').fadeIn('slow');
    }else{
    //hide the button if scroll offset is less than 400 pixels
    $('.to-top-btn').fadeOut('slow');
    }
    });
    });
    </script>
    ";

    echo $_Back_To_Top;

    Comment


    • #3
      I think you missed the Id of image to be .to_top_btn
      /Giuseppe

      Professional Scriptcase Services
      Some Customers opinions

      Comment


      • #4
        Hi I'm the author of the script. Upon checking the code you posted, you missed the img class "to-top-btn".

        Add the class like this:

        Code:
        <img src='../../../file/img/up-arrow.png' alt='back-to-top' class="to-top-btn">
        If you have any other concern, you can post directly to this link so i can quickly answer your concern.

        Best regards.

        Comment


        • #5
          Originally posted by iahnn View Post
          Hi I'm the author of the script. Upon checking the code you posted, you missed the img class "to-top-btn".

          Add the class like this:

          Code:
          <img src='../../../file/img/up-arrow.png' alt='back-to-top' class="to-top-btn">
          If you have any other concern, you can post directly to this link so i can quickly answer your concern.

          Best regards.
          ^^^^^

          This. I always mix "class" and "id" with the dot
          /Giuseppe

          Professional Scriptcase Services
          Some Customers opinions

          Comment


          • #6
            Thank you all, for your answers, I apologize for my late reply, now I post the code I used and it all works very well.
            Congratulations iahnn for good code is really very helpful !!
            It is true I had forgotten the class, in all cases, I added the css: z-index: 999; otherwise the grid of SC8 covered me up the button.
            For this to work the code must be entered in onApplicationInit, below I post the fully functional code.
            I hope it will help someone.
            Hello to all.

            $Img_Up_Arrow = [_PERC_wm_h]."up_arrow_azzurro_170x170.png";

            $Up_Pagina=
            "<style>
            .to-top-btn {
            position: fixed;
            width: 20vw;
            height: auto;
            bottom: 10%;
            right: 5%;
            z-index: 999;
            text-decoration:none;
            /*background: #1E90FF;*/
            display: none;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            }
            </style>
            <html>
            <!-- Bottone a Fine Pagina per Tornare al Top -->
            <a href='#' >
            <img src='".$Img_Up_Arrow."' class='to-top-btn' alt='back-to-top'>
            </a>
            </html>

            <script>
            jQuery(function($) {
            //lets handle the button click event
            $('.to-top-btn').on('click', function(e) {
            $('body, html').stop().animate({scrollTop: 0}, 'slow', 'swing');
            e.preventDefault();
            });
            //lets show the button when the page scroll to about 400 pixels
            //change the value to your desired offset
            $(window).scroll(function() {
            if($(window).scrollTop() > 400){
            //show the button when scroll offset is greater than 400 pixels
            $('.to-top-btn').fadeIn('slow');
            }else{
            //hide the button if scroll offset is less than 400 pixels
            $('.to-top-btn').fadeOut('slow');
            }
            });
            });
            </script>";

            echo $Up_Pagina;

            Comment


            • #7
              Thanks for share
              /Giuseppe

              Professional Scriptcase Services
              Some Customers opinions

              Comment

              Working...
              X