Im working on a menu for my website.The idea is that on click on a menuselection the menucard scrolls to said portion of the menu.
I tried different approaches,sofar only $(function MyFunction() is working,but i need sth more general where i can include a parameter into the function like function myFunctionScroll(target1).
For some reason myFunctionScroll(target1), myFunctionScroll2(target2),myFunctionScroll3(target3) dont work , why ?
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>Speisemenue3</title>
<style>
html,body{background:url(photoshopMat/GreenWhiteRed.gif);
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Beliebte Menues</span></a></li>
<li><a href='#'id="scrollToAntipasti"><span>Antipasti-Vorspeisen</span></a></li>
<li><a href='#'><span>Minestrone-Suppen</span></a></li>
<li class='last'><a href='#'><span>Insalate-Salate</span></a></li>
<li><a href='#'><span>Pasta-Nudelgerichte</span></a></li>
<li><a href='#'><span>Pizza aus Holzofen</span></a></li>
<li class="fontregulation1"><a href='#'><span>Carne-Fleischgerichte</span></a></li>
<li><a href='#'><span>Pesce-Fischgerichte</span></a></li>
<li><a href='#' onclick="MyFunctionScroll3(dolce2)"><span>Dolce-Desserts</span></a></li>
<li><a href='#'id="cafee1"><span>Cafee und Tee</span></a></li>
<li><a href='#'onclick="MyFunctionScroll(#vini2)"><span>Vini-Weine</span></a></li>
<li><a href='#' onclick="MyFunctionScroll2(aperitivi2)"><span>Aperitivi-Spirituosen</span></a></li>
</ul>
</div>
<div id="upPart">
</div>
<div id="menuDetailed">
<div class="menuField"><div class="MenuFieldHeader" id="dolce2">Dolce – Desserts</div></div>
<div class="menuField"><div class="FD1">170 Tiramisu ( A – C – G ) </div> <div class="FD2">3,50 €</div><div class="FD3">nach Art des Hauses </div></div>
<div class="menuField"><div class="FD1">171 Mohr im Hemd ( A – C – G ) </div> <div class="FD2">3,50 € </div><div class="FD3">Schokokuchen mit Schokosauce und Schlagobers </div></div>
<div class="menuField"><div class="FD1">172 Eispalatschinken ( A – C – G ) </div> <div class="FD2">3,50 € </div><div class="FD3">Palatschinken gefüllt mit Vanilleeis drüber Schlagobers und Schokosauce</div></div>
<div class="menuField"><div class="FD1">173 Marmeladepalatschinken ( A – C – G ) </div> <div class="FD2">3,50 €</div><div class="FD3">Palatschinken gefüllt mit Marillenmarmelade </div></div>
<div class="menuField"><div class="FD1">174 Topfenpalatschinken ( A – C – G ) </div> <div class="FD2">4,00 €</div><div class="FD3">Palatschinken gefüllt mit Topfen und Rosienen</div></div>
<div class="menuField"><div class="FD1">175 Apfelstrudel ( A – C – G ) </div> <div class="FD2">3,50 €</div><div class="FD3">original Wiener Apfelstrudel</div></div>
<div class="menuField"><div class="FD1">176 Topfenstrudel ( A – C – G ) </div> <div class="FD2">3,50 €</div><div class="FD3">Strudel gefüllt mit feinem Topfen und Rosienen </div></div>
<div class="menuField"><div class="FD1">177 Profiterolen ( A – C – G ) </div> <div class="FD2">4,50 €</div><div class="FD3">Brandteigkrapfen, gefüllt mit Sahne und serviert mit Schokosauce und Schlagobers </div></div>
<div class="menuField"><div class="FD1">178 Nusspalatschinken ( A – C – G )</div> <div class="FD2">3,50 € </div><div class="FD3">Palatschinken gefüllt mit Schokosauce und geriebenem Haselnuss</div></div>
<div class="menuField"><div class="MenuFieldHeader"id="cafee2">Cafe & Tee</div></div>
<div class="menuField"><div class="FD1">kleiner Mocca </div> <div class="FD2">1,80 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">kleiner Brauner </div> <div class="FD2">1,80 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">großer Mocca </div> <div class="FD2">2,10 €</div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">großer Brauner </div> <div class="FD2">2,10 €</div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Melange </div> <div class="FD2">2,10 €</div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Cappuccino </div> <div class="FD2">2,50 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Tee ( Früchte, Schwarz, Kamille, Pfefferminz) </div> <div class="FD2">1,70 €</div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Tee mit Zitrone </div> <div class="FD2">1,90 €</div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Tee mit Rum </div> <div class="FD2">2,10 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="MenuFieldHeader" id="vini2">Vini – Weine</div></div>
<div class="menuField"><div class="FD1">Hauswein 1/8 </div> <div class="FD2">1,50 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Lambrusco 1/8 </div> <div class="FD2">2,20 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Soave 1/8 </div> <div class="FD2">2,20 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Frascati 1/8</div> <div class="FD2">2,20 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Valpolicella 1/8</div> <div class="FD2">2,20 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Chianti 1/8</div> <div class="FD2">2,20 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Bardolino 1/8</div> <div class="FD2">2,20 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">La Crima Christi 1/8</div> <div class="FD2">2,20 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Weiß gespritzt 1/4</div> <div class="FD2">2,20 €</div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Rot gespritzt 1/4</div> <div class="FD2">2,20 € </div><div class="FD3"> </div></div>
<div class="menuField"><div class="FD1">Flasche Hauswein </div> <div class="FD2">9,90 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Flasche Wein </div> <div class="FD2"> 14,90 € </div><div class="FD3"> Soave Chianti Lambrusco Bardolino Valpolicella</div></div>
<div class="menuField"><div class="MenuFieldHeader" id="aperitivi2">Aperitivi – Spirituosen</div></div>
<div class="menuField"><div class="FD1">Grappa 2 cl </div> <div class="FD2">2,40 € </div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Wodka 2 cl</div> <div class="FD2">2,40 €</div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Wodka-Rot 2 cl</div> <div class="FD2">2,40 €</div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Whiskey 2 cl</div> <div class="FD2">2,40 €</div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Tequilla2 cl</div> <div class="FD2">2,40 €</div><div class="FD3"></div></div>
<div class="menuField"><div class="FD1">Raki 2 cl</div> <div class="FD2">2,40 € </div><div class="FD3"></div></div>
</div>
<script>
$(function MyFunction() { //When the document loads
$("#cafee1").bind("click", function( target1) {
$(window).scrollTop($("#cafee2").offset().top); //scroll to div with container as ID.
return false; //Prevent Default and event bubbling.
});
});
function myFunctionScroll(target1){
$(window).scrollTop($("target1").offset().top); //scroll to div with container as ID.
return false; //Prevent Default and event bubbling.
};
function myFunctionScroll2(target2) {
$('html, body').animate({ scrollTop: $('#div_rarget2').offset().top }, 'slow');
return false;
}
function myFunctionScroll3(target3){
document.getElementById("target3").scrollIntoView()
};
</script>
</body>
<html>