Can someone tell me how to implement this Javascript? HTML CSS


Tags: javascript,jquery,html,css

Problem :

I found this awesome link with a scroll-to-top button that I'd like to add to my web page. Can someone tell me how to implement the javascript part? I tried inserting it at the bottom of my html page in script tags, but it doesn't seem to be working.

http://jsfiddle.net/yeyene/J3zyq/3/

$(document).ready(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() > 100){
            $('#goTop').stop().animate({
                top: '20px'    
                }, 500);
        }
        else{
            $('#goTop').stop().animate({
               top: '-100px'    
            }, 500);
        }
    });
    $('#goTop').click(function() {
        $('html, body').stop().animate({
           scrollTop: 0
        }, 500, function() {
           $('#goTop').stop().animate({
               top: '-100px'    
           }, 500);
        });
    });
});    

Otherwise I know how to style and configure the HTML and CSS.

Thanks!



Solution :

Put this line of code in your <head> (above the rest of your JavaScript)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Or if the code is not compatible with 2.1.3, you can use this one instead:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

If it works after that, then you just didn't have jQuery loaded. It will load faster if you save jQuery locally but this is fine for testing purposes.


    CSS Howto..

    Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

    How to test a webpage for different aspect ratios

    How to use sprite image in css?

    CSS How to display an image in the size of a / text line

    How can i learn CSS easily?

    How to change transparency of background image using javascript?

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    How to make a
  • link visited with css
  • How to make the background DIV only transparent using CSS

    How do I center content and extend the background color to 100% of the page?

    How to hide the div after sometime in angular or css?

    How to use jQueryUI tootip along with my custom css

    how to make a timeline using html, css, javascript?

    3 column css how to make the columns even?

    how to i convert this asp.net list to html list?

    How to keep an unordered list centered within the screen?

    How to locate element on a map by xpath or css selector

    How to make this character to be placed at the right side of its container?

    How to find the place where font-size for input is set?

    How to reset input element style

    How To Create Full Screen Fixed With Scrolling Background Images

    How to do fade-in and fade-out with JavaScript and CSS

    How to scroll left column when cursor is above right column?

    HTML code to show splitted data_frame in one html page using python

    How to convert css long to css one line style with Notepad++

    How to change label color of disabled checkbox in ASP.NET?

    How to add row top and bottom margins to asp.net gridview?

    How to solve position issue in ie7 using html and css?

    How can I show only a section of a video frame with CSS or JavaScript?

    How to hide a div based on its class