0

I try some jquery for scrolling page into sections. It works in Google Chrome, but in Mozilla Firefox nothing happens.

Here is my code in html:

<!DOCTYPE html>
<html>

<head>
    <title>LP Portfolio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Lobster+Two|Lora|Vollkorn" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
    <div id="container">
        <div class="hero">
            <div id="header">
                <div id="header-logo">
                    <img src="images/logo.png" alt="header-logo">
                </div>
                <div id="header-opis">
                    <h2><span class="prvo-slovo">L</span>uka <span class="prvo-slovo">P</span>aradzik</h2>
                    <h3>Web Developer</h3>
                </div>

                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a id="about" href="#aboutSection">About</a></li>
                            <li><a id="portfolio" href="#portfolioSection">Portfolio</a></li>
                            <li><a id="gallery" href="#gallerySection">Gallery</a></li>
                            <li><a id="blog" href="#blogSection">Blog</a></li>
                            <li><a id="contact" href="#contactSection">Contact</a></li>
                        </ul>
                    </nav>

                <div id="header-menu-gumb">
                    <a href="#"><img src="images/menu.png"></a>
                </div>
            </div>
        </div>

        <div id="aboutSection">

I have 5 divs with id's that is href in nav a tags. At the end of my html document I linked html with js scripts:

    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/scrolling.js"></script>

This is the code in scrolling.js script:

$(document).ready(function() {
    skrolanjeStranice();
});

function skrolanjeStranice() {

    $("nav a").click(function(e) {

        e.preventDefault();

        var sectionID = e.currentTarget.id + "Section";


        $("html body").animate({

            scrollTop: $("#" + sectionID).offset().top

        }, 1000)
    })
}

In Mozilla browser console i get this error:

TypeError: $(...).offset(...) is undefined  scrolling.js:19:15

In google chrome all works perfect.

Thanks for help. Also sorry for bad explanation of problem. I'm new in this and I just want to learn new things.

Chepech
  • 4,684
  • 3
  • 41
  • 64
lukpar
  • 29
  • 5
  • From what I can see you are not actually loading in the `scrolling.js`. Could you post your code, not as images? – Fabian Schultz Feb 19 '17 at 11:58
  • jQuery works in Mozzila. It is something else, that doesn't, and it is your job to narrow down the problem area. [Check similar question here](http://stackoverflow.com/questions/17776544/jquery-scrolltop-firefox-not-working) – Vladimir M Feb 19 '17 at 11:59
  • Please provide a [mcve] – charlietfl Feb 19 '17 at 12:05
  • Paste your scrolling.js script somewhere so it can be viewed and debugged. The script you provided does not include the script throwing the actual error. – Korgrue Feb 21 '17 at 16:20
  • I managed to solve the problem. In jQuery script I added a comma between the html and body tag in the row where is animate function. Then it works also in the Mozilla Firefox. It worked without comma in Google Chrome, so it was a little confusing for me. – lukpar Feb 22 '17 at 21:56

0 Answers0