我使用了在网上找到的 JS 脚本。它像一种魅力一样起作用，突然间，我不知道为什么，它没有。
问题是，当我单击“职业”或“联系我们”按钮时，它不会滚动到该部分，而且超链接很好——它要么随机滚动，要么转到顶部。
您可以查看在线网站here这是完整的代码(原始代码未经编辑，但运行良好):
(function($) {
"use strict"; // Start of use strict
// Closes the sidebar menu
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
$(this).toggleClass("active");
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('#sidebar-wrapper .js-scroll-trigger').click(function() {
$("#sidebar-wrapper").removeClass("active");
$(".menu-toggle").removeClass("active");
$(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
});
// Scroll to top button appear
$(document).scroll(function() {
var scrollDistance = $(this).scrollTop();
if (scrollDistance > 100) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
})(jQuery); // End of use strict
// Disable Google Maps scrolling
// See http://stackoverflow.com/a/25904582/1607849
// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function(event) {
var that = $(this);
that.on('click', onMapClickHandler);
that.off('mouseleave', onMapMouseleaveHandler);
that.find('iframe').css("pointer-events", "none");
}
var onMapClickHandler = function(event) {
var that = $(this);
// Disable the click handler until the user leaves the map area
that.off('click', onMapClickHandler);
// Enable scrolling zoom
that.find('iframe').css("pointer-events", "auto");
// Handle the mouse leave event
that.on('mouseleave', onMapMouseleaveHandler);
}
// Enable map zooming with mouse scroll when the user clicks the map
$('.map').on('click', onMapClickHandler); body,
html {
width: 100%;
height: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
body {
font-family: 'Source Sans Pro';
}
.btn-xl {
padding: 1.25rem 2.5rem;
}
.content-section {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.content-section-heading h2 {
font-size: 3rem;
}
.content-section-heading h3 {
font-size: 1rem;
text-transform: uppercase;
}
.content-section-contact {
padding-top: 6.5rem;
padding-bottom: 6.5rem;
background-color: #3194f7 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
/* Map */
.map {
height: 40rem;
}
.map iframe {
pointer-events: none;
}
.scroll-to-top {
position: fixed;
right: 15px;
bottom: 15px;
display: none;
width: 50px;
height: 50px;
text-align: center;
color: white;
background: rgba(52, 58, 64, 0.5);
line-height: 45px;
}
.scroll-to-top:focus, .scroll-to-top:hover {
color: white;
}
.scroll-to-top:hover {
background: #4a4a4a;
}
.scroll-to-top i {
font-weight: 800;
}
.masthead {
min-height: 30rem;
position: relative;
display: table;
width: 100%;
height: auto;
padding-top: 8rem;
padding-bottom: 8rem;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-masthead.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 50% 50%;
}
.masthead h1 {
font-size: 4rem;
margin: 0;
padding: 0;
}
@media (min-width: 992px) {
.masthead {
height: 100vh;
}
.masthead h1 {
font-size: 5.5rem;
}
}
/* Side Menu */
#sidebar-wrapper {
position: fixed;
z-index: 2;
right: 0;
width: 250px;
height: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
transform: translateX(250px);
background: #3194f7;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.flag {
width: 50px;
height: 50px;
background-color: #3194f7;
}
.sidebar-nav-language {
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li.sidebar-nav-item a {
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 1.2rem;
background: rgba(52, 58, 64, 0.1);
height: 80px;
line-height: 50px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
.sidebar-nav > .sidebar-brand a {
color: #fff;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.menu-toggle {
position: fixed;
right: 15px;
top: 15px;
width: 50px;
height: 50px;
text-align: center;
color: #fff;
background: rgba(52, 58, 64, 0.5);
line-height: 50px;
z-index: 999;
}
.menu-toggle:focus, .menu-toggle:hover {
color: #fff;
}
.menu-toggle:hover {
background: #343a40;
}
.callout {
padding: 15rem 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callou.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.callout h2 {
font-size: 3.5rem;
font-weight: 700;
display: block;
max-width: 30rem;
}
footer.footer {
padding-top: 5rem;
padding-bottom: 5rem;
}
footer.footer .social-link {
display: block;
height: 4rem;
width: 4rem;
line-height: 4.3rem;
font-size: 1.5rem;
background-color: #3194f7;
transition: background-color 0.15s ease-in-out;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}
footer.footer .social-link:hover {
background-color: #155d74;
text-decoration: none;
}
a {
color: #3194f7;
}
a:hover, a:focus, a:active {
color: #155d74;
}
.btn-primary {
background-color: #3194f7 !important;
border-color: #1D809F !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #155d74 !important;
border-color: #155d74 !important;
}
.btn-secondary {
background-color: #ecb807 !important;
border-color: #ecb807 !important;
color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: #ba9106 !important;
border-color: #ba9106 !important;
}
.btn-dark {
color: #fff !important;
}
.btn-through {
background-color: #3194f7 !important;
border-color: #1D809F !important;
color: #FFF !important;
position:relative;
margin-top: 65%;
margin-right: 55% !important;
margin-left: -50%;
margin-bottom: -20%;
}
@media (max-width: 767px) {
.masthead {
background-size: 55% 65%;
}
.btn-through {
position: relative;
margin-top: 50%;
margin-bottom: -120%;
margin-left: -90%;
}
}
.btn-through:hover, .btn-through:active {
background-color: #1D809F !important;
border-color: #ecb807 !important;
color:white !important;
opacity: 0.9;
}
.btn {
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
font-weight: 700;
}
.bg-primary {
background-color: #1D809F !important;
}
.text-primary {
color: #1D809F !important;
}
.text-secondary {
color: #ecb807 !important;
}
.text-bold {
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
.margin-left {
margin-left: 3%;
margin-top: 3%;
}
.bg-blue {
background-color: #3194f7 !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>Industiral Consulting - Industrial Processes</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body id="page-top">
<!-- Navigation -->
<a class="menu-toggle rounded" href="#">
<i class="fa fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#page-top">Home</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#about">About Us</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#careers">Careers</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#contact">Contact</a>
</li>
<ul class="list-inline">
<li class="list-inline-item margin-left">
<a href="index.html"><img class="flag" src="img/Britain-flag.png" alt="English"></a>
</li>
<li class="list-inline-item margin-left">
<a href="index_de.html"><img class="flag" src="img/Germany-flag.png" alt="German"></a>
</li>
<li class="list-inline-item margin-left">
<a href="index_rs.html"><img class="flag" src="img/Serbian-flag.png" alt="Serbian"></a>
</li>
</ul>
</ul>
</nav>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<!--<h1 class="mb-1">Industrial Consulting</h1>
<h3 class="mb-5">
<em>Industrial Processes</em>
</h3> -->
</div>
<div class="container text-center my-auto">
<a class="btn btn-through btn-xl js-scroll-trigger" href="#about">Find More</a>
</div>
<div class="overlay">
</div>
</header>
<!-- About -->
<section class="content-section" id="about">
<div class="container text-center">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2>About Us</h2>
<p class="lead mb-5">We are a management consulting firm focused on small and medium-sized businesses, predominantly in metalworking industry. <br>
Our approach is to help clients to constantly make better decisions, especially in transition periods. <br>
We offer consulting services in areas such as Change Management, Process Optimisation, Production Optimisation and HR Politics. <br>
We are well connected between the German and Serbian market.
</p>
<a class="btn btn-dark btn-xl js-scroll-trigger" href="#careers">Careers</a>
</div>
</div>
</div>
</section>
<!-- Callout -->
<section class="callout" id="careers">
<div class="container text-center">
<h2 class="mx-auto mb-5 text-bold">Internships and careers:</h2>
<p class="lead mb-5 text-bold" >If you are interested in working with us and our potential clients from different industries, please send us cv and motivation letter on office@industrialcons.com </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#contact">Contact Us!</a>
</div>
</section>
<!-- Contact us section -->
<section class="content-section-contact bg-blue bg-primary text-white" id="contact">
<div class="container text-center bg-blue">
<h2 class="mb-4">Fruskogorska 29, 21000 Novi Sad, Serbia </h2><br>
<h2 class="mb-4">Email: office@industrialcons.com</h2>
</div>
</section>
<!-- Map -->
<section class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5399722.141398233238!2d19.847745025463805!3d45.23487318284108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475b100e12212b31%3A0xef7954ac2f396b37!2sFru%C5%A1kogorska+29%2C+Novi+Sad!5e0!3m2!1sen!2srs!4v1524649147292"></iframe>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white" href="https://www.linkedin.com/company/18593992/">
<i class="icon-social-linkedin"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright © Industrial Consulting - Industiral Processes</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>最佳答案
现在可以了。我已经编辑了 JQuery 点击函数来调用它需要按类滚动到的部分。
编辑: 主页点击不适用于先前的答案。它现在工作正常。已将 Home ID 移至 HTML 中的 header 。
(function($) {
"use strict"; // Start of use strict
// Closes the sidebar menu
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
$(this).toggleClass("active");
});
// Smooth scrolling using jQuery easing
$('js-scroll-trigger').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('#sidebar-wrapper .js-scroll-trigger').click(function() {
$("#sidebar-wrapper").removeClass("active");
$(".menu-toggle").removeClass("active");
$(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
});
// Scroll to top button appear
$(document).scroll(function() {
var scrollDistance = $(this).scrollTop();
if (scrollDistance > 100) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
})(jQuery); // End of use strict
// Disable Google Maps scrolling
// See http://stackoverflow.com/a/25904582/1607849
// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function(event) {
var that = $(this);
that.on('click', onMapClickHandler);
that.off('mouseleave', onMapMouseleaveHandler);
that.find('iframe').css("pointer-events", "none");
}
var onMapClickHandler = function(event) {
var that = $(this);
// Disable the click handler until the user leaves the map area
that.off('click', onMapClickHandler);
// Enable scrolling zoom
that.find('iframe').css("pointer-events", "auto");
// Handle the mouse leave event
that.on('mouseleave', onMapMouseleaveHandler);
}
// Enable map zooming with mouse scroll when the user clicks the map
$('.map').on('click', onMapClickHandler);body,
html {
width: 100%;
height: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
body {
font-family: 'Source Sans Pro';
}
.btn-xl {
padding: 1.25rem 2.5rem;
}
.content-section {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.content-section-heading h2 {
font-size: 3rem;
}
.content-section-heading h3 {
font-size: 1rem;
text-transform: uppercase;
}
.content-section-contact {
padding-top: 6.5rem;
padding-bottom: 6.5rem;
background-color: #3194f7 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
/* Map */
.map {
height: 40rem;
}
.map iframe {
pointer-events: none;
}
.scroll-to-top {
position: fixed;
right: 15px;
bottom: 15px;
display: none;
width: 50px;
height: 50px;
text-align: center;
color: white;
background: rgba(52, 58, 64, 0.5);
line-height: 45px;
}
.scroll-to-top:focus, .scroll-to-top:hover {
color: white;
}
.scroll-to-top:hover {
background: #4a4a4a;
}
.scroll-to-top i {
font-weight: 800;
}
.masthead {
min-height: 30rem;
position: relative;
display: table;
width: 100%;
height: auto;
padding-top: 8rem;
padding-bottom: 8rem;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-masthead.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 50% 50%;
}
.masthead h1 {
font-size: 4rem;
margin: 0;
padding: 0;
}
@media (min-width: 992px) {
.masthead {
height: 100vh;
}
.masthead h1 {
font-size: 5.5rem;
}
}
/* Side Menu */
#sidebar-wrapper {
position: fixed;
z-index: 2;
right: 0;
width: 250px;
height: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
transform: translateX(250px);
background: #3194f7;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.flag {
width: 50px;
height: 50px;
background-color: #3194f7;
}
.sidebar-nav-language {
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li.sidebar-nav-item a {
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 1.2rem;
background: rgba(52, 58, 64, 0.1);
height: 80px;
line-height: 50px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
.sidebar-nav > .sidebar-brand a {
color: #fff;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.menu-toggle {
position: fixed;
right: 15px;
top: 15px;
width: 50px;
height: 50px;
text-align: center;
color: #fff;
background: rgba(52, 58, 64, 0.5);
line-height: 50px;
z-index: 999;
}
.menu-toggle:focus, .menu-toggle:hover {
color: #fff;
}
.menu-toggle:hover {
background: #343a40;
}
.callout {
padding: 15rem 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callou.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.callout h2 {
font-size: 3.5rem;
font-weight: 700;
display: block;
max-width: 30rem;
}
footer.footer {
padding-top: 5rem;
padding-bottom: 5rem;
}
footer.footer .social-link {
display: block;
height: 4rem;
width: 4rem;
line-height: 4.3rem;
font-size: 1.5rem;
background-color: #3194f7;
transition: background-color 0.15s ease-in-out;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}
footer.footer .social-link:hover {
background-color: #155d74;
text-decoration: none;
}
a {
color: #3194f7;
}
a:hover, a:focus, a:active {
color: #155d74;
}
.btn-primary {
background-color: #3194f7 !important;
border-color: #1D809F !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #155d74 !important;
border-color: #155d74 !important;
}
.btn-secondary {
background-color: #ecb807 !important;
border-color: #ecb807 !important;
color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: #ba9106 !important;
border-color: #ba9106 !important;
}
.btn-dark {
color: #fff !important;
}
.btn-through {
background-color: #3194f7 !important;
border-color: #1D809F !important;
color: #FFF !important;
position:relative;
margin-top: 65%;
margin-right: 55% !important;
margin-left: -50%;
margin-bottom: -20%;
}
@media (max-width: 767px) {
.masthead {
background-size: 55% 65%;
}
.btn-through {
position: relative;
margin-top: 50%;
margin-bottom: -120%;
margin-left: -90%;
}
}
.btn-through:hover, .btn-through:active {
background-color: #1D809F !important;
border-color: #ecb807 !important;
color:white !important;
opacity: 0.9;
}
.btn {
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
font-weight: 700;
}
.bg-primary {
background-color: #1D809F !important;
}
.text-primary {
color: #1D809F !important;
}
.text-secondary {
color: #ecb807 !important;
}
.text-bold {
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
.margin-left {
margin-left: 3%;
margin-top: 3%;
}
.bg-blue {
background-color: #3194f7 !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>Industiral Consulting - Industrial Processes</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Navigation -->
<a class="menu-toggle rounded" href="#">
<i class="fa fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#page-top">Home</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#about">About Us</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#careers">Careers</a>
</li>
<li class="sidebar-nav-item">
<a class="js-scroll-trigger" href="#contact">Contact</a>
</li>
<ul class="list-inline">
<li class="list-inline-item margin-left">
<a href="index.html"><img class="flag" src="img/Britain-flag.png" alt="English"></a>
</li>
<li class="list-inline-item margin-left">
<a href="index_de.html"><img class="flag" src="img/Germany-flag.png" alt="German"></a>
</li>
<li class="list-inline-item margin-left">
<a href="index_rs.html"><img class="flag" src="img/Serbian-flag.png" alt="Serbian"></a>
</li>
</ul>
</ul>
</nav>
<!-- Header -->
<header class="masthead d-flex" id="page-top">
<div class="container text-center my-auto">
<!--<h1 class="mb-1">Industrial Consulting</h1>
<h3 class="mb-5">
<em>Industrial Processes</em>
</h3> -->
</div>
<div class="container text-center my-auto">
<a class="btn btn-through btn-xl js-scroll-trigger" href="#about">Find More</a>
</div>
<div class="overlay">
</div>
</header>
<!-- About -->
<section class="content-section" id="about">
<div class="container text-center">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2>About Us</h2>
<p class="lead mb-5">We are a management consulting firm focused on small and medium-sized businesses, predominantly in metalworking industry. <br>
Our approach is to help clients to constantly make better decisions, especially in transition periods. <br>
We offer consulting services in areas such as Change Management, Process Optimisation, Production Optimisation and HR Politics. <br>
We are well connected between the German and Serbian market.
</p>
<a class="btn btn-dark btn-xl js-scroll-trigger" href="#careers">Careers</a>
</div>
</div>
</div>
</section>
<!-- Callout -->
<section class="callout" id="careers">
<div class="container text-center">
<h2 class="mx-auto mb-5 text-bold">Internships and careers:</h2>
<p class="lead mb-5 text-bold" >If you are interested in working with us and our potential clients from different industries, please send us cv and motivation letter on office@industrialcons.com </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#contact">Contact Us!</a>
</div>
</section>
<!-- Contact us section -->
<section class="content-section-contact bg-blue bg-primary text-white" id="contact">
<div class="container text-center bg-blue">
<h2 class="mb-4">Fruskogorska 29, 21000 Novi Sad, Serbia </h2><br>
<h2 class="mb-4">Email: office@industrialcons.com</h2>
</div>
</section>
<!-- Map -->
<section class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5399722.141398233238!2d19.847745025463805!3d45.23487318284108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475b100e12212b31%3A0xef7954ac2f396b37!2sFru%C5%A1kogorska+29%2C+Novi+Sad!5e0!3m2!1sen!2srs!4v1524649147292"></iframe>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white" href="https://www.linkedin.com/company/18593992/">
<i class="icon-social-linkedin"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright © Industrial Consulting - Industiral Processes</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>关于javascript - jQuery scrolling 随机滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50279174/