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.