onclick scroll to

Question

Latrell_vie 9 Light Poster

8 Years Ago

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>

javascript

Edited 8 Years Ago by Latrell_vie

2 Contributors
1 Reply
263 Views
1 Month Discussion Span
Latest Post 8 Years Ago Latest Post by Chris_33

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Chris_33 0 Newbie Poster · Answer 1 · 2015-11-04T15:22:04+00:00

First I would like to point out that you do not need javascript to accomplish this. All you need are anchors.
<a href="#target">Target Card</a>
would scroll to:
<div id="target"> ... </div>
or
<h1 id="target"> ... </h1>

But you asked for jquery so here you go:

<ul id="cssmenu">
    <li><a href='#' data-target="ApS"><span>Aperitivi-Spirituosen</span></a></li>
 </ul>
 ...
 <div class="menuField"><div class="MenuFieldHeader" id="ApS">Aperitivi - Spirituosen</div></div> 
    <div class="menuField"><div class="FD1">Grappa 2 cl </div> <div class="FD2">2,40 EUR </div><div class="FD3"></div></div>
    <div class="menuField"><div class="FD1">Wodka 2 cl</div> <div class="FD2">2,40 EUR</div><div class="FD3"></div></div>
    <div class="menuField"><div class="FD1">Wodka-Rot 2 cl</div> <div class="FD2">2,40 EUR</div><div class="FD3"></div></div>
...
<script>
$('#cssmenu ').on('click','a', function(){
  var target = $(this).data("target");
    $(window).scrollTop($("#"+target).offset().top);
    return false;
});
</script>