3

I am developing a one page website. So far, I successfully implemented 'vertical smooth scroll' function (for my HOME, ABOUT, GALLERY... navigation links) and it works just fine.

Now, I wanted to add another jquery to the same website - a small 'scroll up' button which is supposed to show up at the bottom right corner for easier navigation. The thing is that it never shows up???

Here is what I have done so far:

HTML:

<a class="scrollup" href="#">Scroll</a>

CSS:

.scrollup {
  height: 38px;
  width: 38px;
  opacity: 1.0;
  position:fixed;
  bottom: 35px;
  right: 35px;
  background: url(images/top.png) no-repeat;
}

JQUERY (I opened scrollup.js document and added this code inside):

// scroll-to-top button show and hide
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > 100) {
            jQuery('.scrollup').fadeIn();
        } else {
            jQuery('.scrollup').fadeOut();
    }
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
    jQuery("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

I also added these scripts into my HTML header:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
    <script type='text/javascript' src='scrollup.js'></script>
    <script type='text/javascript' src='verticalsmoothscrolling.js'></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>

Still, my vertical smooth scroll is working fine, but 'scrollup' button never shows up??? Does the order of the scripts at the bottom of this question matters? Or it is something else? Hope you guys can help me to solve this. Thankssss :)

Joanna T.
  • 57
  • 5
  • Please note that the onclick handler is possibly never attached, because it isn't in the `.ready()` function. Is not really related to the problem I think though. The order of the scripts is important, but they seem to be in the right order. – Sumurai8 Aug 25 '13 at 14:27
  • Thanks for your contribution. I was actually following this short tutorial and I only slightly changed the CSS. But w/o success :( – Joanna T. Aug 25 '13 at 14:32
  • http://antesarkkinen.com/blog/easy-jquery-scroll-to-top-of-the-page-code-snippet/ – Joanna T. Aug 25 '13 at 14:34
  • [Quickly tested](http://jsfiddle.net/T7WJg/1/) the code, but it seems to work there. The CSS doesn't hide the 'scrollup' link, so what does hide it (besides scrolling)? Try switching the `scrollup.js` and the `verticalsmoothscrolling.js`. Smoothscrolling might cancel the default action/event bubbling/other scroll handlers. – Sumurai8 Aug 25 '13 at 14:41
  • You mean just to try to switch the order of those two .js documents in my ??? – Joanna T. Aug 25 '13 at 14:48
  • I added display: none; in the CSS and tried to switch the order of my two .js documents in the of HTML but nothing happens. – Joanna T. Aug 25 '13 at 14:51
  • Are you getting any errors in your developer console? What is in the verticalsmoothscroll-file? If it's too big, could you give a link? – Sumurai8 Aug 25 '13 at 14:54
  • I am working in Notepad++. Not sure about errors. I don't see anything is wrong. When I run my index.html document everything works well, expect - the scroll up button is not there... – Joanna T. Aug 25 '13 at 14:58
  • I just edited my question and updated the same with all the scripts I have in my tag of my HTML. Maybe the problem is there??? – Joanna T. Aug 25 '13 at 15:02
  • You can open up the developer console in a browser by pressing F12 in most browsers. The console shows fatal errors and warnings. Apart from that it usually shows a DOM-tree and other useful information for optimization and debugging. – Sumurai8 Aug 25 '13 at 15:05
  • @Samurai8: I am using the latest version of Mozilla Firefox. What should I check when I enter the developer console? – Joanna T. Aug 25 '13 at 15:12
  • Have you included a doc type? ` ` – apaul Aug 25 '13 at 15:14
  • No. Only You think that's important??? Because my other .js document is working fine. – Joanna T. Aug 25 '13 at 15:15
  • no just a shot in the dark – apaul Aug 25 '13 at 15:17
  • I tried it, it has no impact. – Joanna T. Aug 25 '13 at 15:18
  • That's a valid doctype. About the developer console: https://developer.mozilla.org/nl/docs/Tools/Web_Console – Sumurai8 Aug 25 '13 at 15:23
  • @Samurai8: When I open web console I can see the button!!! But when I close it it's not there :( What should I check in the console??? – Joanna T. Aug 25 '13 at 15:26
  • If you remove the smoothscroll script from this document, does the other script work? – Sumurai8 Aug 25 '13 at 15:28
  • Good idea, let me try. – Joanna T. Aug 25 '13 at 15:29
  • I removed the vertical smooth scroll script but the scrollup script still doesn't work/show up. – Joanna T. Aug 25 '13 at 15:32
  • Btw, I have some warnings in my web console but they are all blue (CSS), so I guess this has no impact on scrollup.js right? – Joanna T. Aug 25 '13 at 15:40
  • Also, as I said before, I can see the button (and it works) when I open web console but it seems like the button is completely out of my website!? It is in the bottom right corner but out of the whole website. When I close the web console the button is not visible anymore??? – Joanna T. Aug 25 '13 at 15:44

1 Answers1

1

If the file is properly loaded and the scroll event is properly fired, this script works (jsFiddle). That means one of three things:

  1. The script is not loaded properly. You should see an error in the developer console related to a 404 error.

  2. The resources for this script are not properly loaded. This doesn't seem to be the case, as you properly include jQuery before your script. This will usually cause an error to pop up in the developer console: referenceError ($ is not defined or jQuery is not defined) or a blahblah is not a function where blahblah is the function you invoked.

  3. The scroll event is not fired. This could be the case, because you have an other script that changes the 'look' of scrolling.

    If this script attaches a handler to the wheel event or the DOMMouseScroll event and prevents the default action, the scroll event will never be fired. How this works can be found in this question.

    To check if the scroll event is called, attach a handler to the scroll event and log something in the console. Check the console to see if something is logged there:

    $(window).on( 'scroll', function() {
  console.log( 'The scroll event fired!' );
} );

    If the scroll event doesn't fire, you can 'fix' this by triggering the scroll event in a wheel (docs) and/or DOMMouseScroll event (docs):

    function triggerScroll() {
  $( window ).trigger( 'scroll' );
}

jQuery.on( 'wheel', triggerScroll );
jQuery.on( 'DOMMouseScroll', triggerScroll );
Community
  • 1
  • 1
Sumurai8
  • 18,213
  • 9
  • 58
  • 88
  • Thanks for your great effort Samurai. I tried this (not sure if it's proper): I opened web console and copied the first part of your code above into a small line/space at the very bottom of my web console of Mozilla Firefox. I pressed enter and then when I used my mouse to scroll I got the message: 'The scroll event fired!' – Joanna T. Aug 25 '13 at 15:56
  • Your comment #2 bothers me. Maybe, there is another, updated version of jquery I should load? – Joanna T. Aug 25 '13 at 16:03
  • I added the first part of the code at the top of my scroll.js document. Nothing happened. I got no message. Then I added the second part of your code above and again, nothing happened??? Really sorry to bother you with this so much. Don't really know what's the problem... – Joanna T. Aug 25 '13 at 16:09
  • Errrr... excuse me. I read it wrong. If it says that the scroll event is fired when you put it in the console, make sure that `scrollup.js` is actually loaded. Is `scrollup.js` in the same directory as `verticalsmoothscrolling.js`? – Sumurai8 Aug 25 '13 at 16:17
  • Woohoo!!! I think I found the solution. This is kinda embarassing for me... I just added z-index: 10; to my CSS and the button showed up and it works perfectly! Sorry guys to bother you so much with all this... @Samurai: Thank you very much for your patience and effort. Appreciate your kindness and knowledge! – Joanna T. Aug 25 '13 at 16:18