我已经制作了一个必须滑到该部分的菜单,我有问题,因为我尝试preventDefault()
事件,但我不能在参数中添加它,因为我传递了另一个参数。谢谢你的帮助:D
...
$(function () {
var home = $('.homeMenu');
var homeSection = $('#slide-header');
var about = $('.aboutMenu');
var aboutSection = $('#about-us');
var service = $('.servicesMenu');
var serviceSection = $('#services');
var products = $('.productMenu');
var productSection = $('#img-boxes');
var contact = $('.contactMenu');
var contactSection = $('#contact');
function slide(param2) {
$('html, body').animate({
scrollTop: $(param2).offset().top
}, 1000);
};
home.on('click', function(){
slide(homeSection)
});
about.on('click', function(){
slide(aboutSection);
})
service.on('click', function(){
slide(serviceSection);
})
products.on('click', function(){
slide(productSection);
})
contact.on('click', function(){
slide(contactSection);
})
})
<body>
<nav class="navbar navbar-default navbar-fixed-top main-navbar navbar-inverse navbar-static-top " role="navigation">
<div class="navbar-header">
<a href="#navi" class="navbar-brand">Unikas</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigate">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="navigate">
<ul class="nav navbar-nav items-list">
<li><a href="#slide-header" class="homeMenu">Home</a></li>
<li><a href="#about-us" class="aboutMenu">O nas</a></li>
<li><a href="#services" class="servicesMenu">Usługi</a></li>
<li><a href="#img-boxes" class="productMenu">Produkty</a></li>
<li><a href="#contact" class="contactMenu">Kontakt</a></li>
</ul>
</div>
</nav>
<header>
<div class="header-content" id="slide-header">
<div class="header-in text-center">
<h1>Unikas</h1>
<h2>najlepsze kasy fiskalne
w najniższych cenach</h2>
<hr>
<p>Od lat specjalizujemy się w kasach fiskalnych oraz usługach z nimi związanymi.<br> Najważniejsza dla nas jest jakość wykonywanych usług oraz zadowolenie klienta </p>
<a href="#about" class="btn btn-primary btn-xl">Zobacz więcej</a>
</div>
</div>
</header>
<section class="about-us" id="about-us">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2>Mamy to czego potrzebujesz</h2>
<hr>
<p>Setki zadowolonych klientów, najniższe ceny oraz najwyższej jakości są gwarantem naszej jakości. Wystarczy spojrzeć na nasze ceny i już wiadomo dlaczego jesteśmy numerem jeden na rynku</p>
<a href="services" class="btn btn-default btn-xl">Sprawdź nasze usługi</a>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Usługi</h2>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-container">
<h2><a href="#myModal1" role="button" class="btn btn-large bt-primary" data-toggle="modal"><span class="icon-bar glyphicon glyphicon-barcode"></span></a></h2>
<h3>Fiskalizacja</h3>
<!-- <p>Fiskalizacja kas fiskalnych</p>-->
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-container">
<h2><a href="#myModal2" role="button" class="btn btn-large bt-primary" data-toggle="modal"><span class="glyphicon glyphicon-search"></span></a></h2>
<h3>Przeglądy</h3>
<!-- <p>Expresowo i tanio wykonywane przeglądy urządzeń</p>-->
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-container">
<h2><a href="#myModal3" role="button" class="btn btn-large bt-primary" data-toggle="modal"><span class="services-icons glyphicon glyphicon-download-alt"></span></a></h2>
<h3>Aktualizacja oprogramowania</h3>
<!-- <p>Aktualizujemy urządzenia natychmiast po pojawieniu się nowego oprogramowania</p>-->
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-container">
<h2><a href="#myModal4" role="button" class="btn btn-large bt-primary" data-toggle="modal"><span class="glyphicon glyphicon-wrench"></span></a></h2>
<h3>Naprawa urządzeń</h3>
<!-- <p>Urządzenia zawsze posiadają gwarancję. Natychmiastowa naprawa</p>-->
</div>
</div>
</div>
</div>
</section>
<section id="img-boxes" >
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Produkty</h2>
<hr>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 img-center-1 img-center">
<img src="img/aclas_kobra_1.jpg" class="img-responsive" alt="">
<div class="img-box-after">
<div class="img-box-after-content">
<div class="img-text-faded">Kasa fiskalna KOS1</div>
<div class="img-name">899zł</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 img-center-2 img-center">
<img src="img/aclas_kos_10.jpg" class="img-responsive" alt="">
<div class="img-box-after">
<div class="img-box-after-content">
<div class="img-text-faded">Kasa fiskalna KOS10</div>
<div class="img-name">
999zł
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 img-center">
<img src="img/aclas_kobra_1.jpg" class="img-responsive" alt="">
<div class="img-box-after">
<div class="img-box-after-content">
<div class="img-text-faded">Kasa fiskalna KOS1</div>
<div class="img-name">
899zł
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 img-center">
<img src="img/aclas_kos_10.jpg" class="img-responsive" alt="">
<div class="img-box-after">
<div class="img-box-after-content">
<div class="img-text-faded">Kasa fiskalna KOS10</div>
<div class="img-name">
999zł
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 img-center">
<img src="img/aclas_kobra_1.jpg" class="img-responsive" alt="">
<div class="img-box-after">
<div class="img-box-after-content">
<div class="img-text-faded">Kasa fiskalna KOS1</div>
<div class="img-name">
899zł
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 img-center">
<img src="img/aclas_kobra_1.jpg" class="img-responsive" alt="">
<div class="img-box-after">
<div class="img-box-after-content">
<div class="img-text-faded">Kasa fiskalna KOS1</div>
<div class="img-name">
899zł
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<aside class="background-dark-theme">
<div class="container text-center">
<div>
<h2>Posiadamy także wysokiej jakości kamery</h2>
</div>
</div>
</aside>
<footer id="contact">
<div class="container footer-content">
<div class="row">
<div class=" footer-text col-lg-8 col-lg-offset-2 text-center ">
<h2 class="heading">Skontaktuj się z nami!</h2>
<hr>
<p>Strona nie obejmuje wszystkich dostępnych przez nas produktów. Realizujemy także specjalne zamówienia. Jeśli interesuje Cię konretny produkt - skontaktuj się z nami a doradzimy Ci</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p>555-555-555</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p><a href="mailto:unikas@poczta.pl">unikas@poczta.pl</a></p>
</div>
<div class="col-md-12 text-center map">
<iframe class="map-frame" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1518.8527286598437!2d-3.708282973942787!3d40.41537539481598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42287ed85fe0d9%3A0xd202c4f0d67625e8!2sPlaza+Mayor%2C+Madryt%2C+Madrid%2C+Hiszpania!5e0!3m2!1spl!2spl!4v1491643777976" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</footer>
<div class="container">
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fiskalizacja</h4>
</div>
<div class="modal-body">
<p>Zajmujemy się stałą fiskalizacją urządzeń. Usługa odbywa się w sposób szybki i w dowolnym dla klienta terminie</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Przeglądy</h4>
</div>
<div class="modal-body">
<p>Dokonujemy starych przeglądów urządzeń fiskalnych zakupionych przez klienta</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Aktualizacja oprogramowania</h4>
</div>
<div class="modal-body">
<p>Nasze produkty zawsze posiadają najnowsze oprogramowanie.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="modal fade" id="myModal4" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Naprawa urządzeń</h4>
</div>
<div class="modal-body">
<p>Każda usterka urządzenia jest przez nas błyskawicznie naprawiana</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>