CODEWITHSUNDEEP
jqueryhtmlcss
Tirolel
Tirolel

Reputation: 928

Jquery trouble with "back to top" feature/ Need to refresh

I do have one problem with the website which Iam adding "back to top" feature, which I have used entire day for fix it but I cant find answer. So I hope there is someone can help me here.

Problem When page loading everything works except of the "back to top", and when I refresh the page the button showing. its annoying cause if I visit the page, I need to F5 to see "back to top" feature.

"back to top" I got it from here --> http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

is there way to prevent the issue?

Edit 1-2 Test page --> http://pizzapastaplace.dk/frhavn --> chose Menu and scroll down. and refresh than u will see the problem. it shows right after the refresh

Edit 3 I have followed this tutorial here http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

Added a link to the bottom of Menu.php

<a href="#" class="back-to-top">Tilbage til toppen <img src="back.gif"> </a>"

added script and css file. thats all what I have done

Upvotes: 1

Views: 483

Answers (1)

Belldandu
Belldandu

Reputation: 2392

It's not a problem with the button The page has to fully load before the button even shows up.

the button works fine i did not have to refresh the page i just waited till the page fully loaded before scrolling down.

Also on a side Note i am using Google Chrome

if you are not using that browser than it could be an issue with the browser im noticing Torch has issues rendering your page alot but then again torch always has issues

Edit:

move this 

<script>            
            jQuery(document).ready(function() {
                var offset = 220;
                var duration = 500;
                jQuery(window).scroll(function() {
                    if (jQuery(this).scrollTop() > offset) {
                        jQuery('.back-to-top').fadeIn(duration);
                    } else {
                        jQuery('.back-to-top').fadeOut(duration);
                    }
                });

                jQuery('.back-to-top').click(function(event) {
                    event.preventDefault();
                    jQuery('html, body').animate({scrollTop: 0}, duration);
                    return false;
                })
            });
        </script>

to the head tag <head> </head> just before the </head>

Edit 2:

mkay i think i see where the main issue is when the main page first loads it doesnt put a bunch of scripts at all specifically 

    <script src="js/jquery.djax.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/jquery.ba-throttle-debounce.min.js"></script>
    <script src="js/transit.js"></script>
    <script src="js/jquery.cycle.all.min.js"></script>
    <script src="js/jquery.maximage.min.js"></script>
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/main.js"></script>

im noticing that when these dont load the button doesnt show up you should make it so that these scripts are loaded in the beginning and not just when it gets to the menu page because those scripts only show up when u directly load the menu section by refreshing so move those scripts to the head of the page as they are obviously needed im not sure which ones are needed but at this point they should definetly be in the head tag and not in the body to prevent them from not being loaded

edit 3:

change 

<script> 
        jQuery(document).ready(function() {
            var offset = 220;
            var duration = 500;
            jQuery(window).scroll(function() {
                if (jQuery(this).scrollTop() > offset) {
                    jQuery('.back-to-top').fadeIn(duration);
                } else {
                    jQuery('.back-to-top').fadeOut(duration);
                }
            });

            jQuery('.back-to-top').click(function(event) {
                event.preventDefault();
                jQuery('html, body').animate({scrollTop: 0}, duration);
                return false;
            })
        });
    </script>

to 

<script> 
        jQuery(window).load(function() {
            var offset = 220;
            var duration = 500;
            jQuery(window).scroll(function() {
                if (jQuery(this).scrollTop() > offset) {
                    jQuery('.back-to-top').fadeIn(duration);
                } else {
                    jQuery('.back-to-top').fadeOut(duration);
                }
            });

            jQuery('.back-to-top').click(function(event) {
                event.preventDefault();
                jQuery('html, body').animate({scrollTop: 0}, duration);
                return false;
            })
        });
    </script>

let me know if this helps or not

edit 4:

try moving <a href="#" class="back-to-top">Back to Top</a> to directly above </body>

edit 5:

after asking the question also is <a href="#" class="back-to-top">Back to Top</a> in index.php at all or is it only in menu.php the answer to this question was found to be that it was not in index.php and needed to be moved there

Upvotes: 1

Related Questions