Hallo,
ich möchte gerne zu bestimmten Webseiteninhalten ("Ankern"), in einer DIV-Box, per "smoothScroll" springen bzw. scrollen.
Da alle Seiteninhalte per include in die DIV-Box geladen werden möchte ich natürlich dass diese nur im Bereich der DIV-Box sichtbar sind und sozusagen alles ausserhalb der DIV-Box ausblenden.
MEIN PROBLEM:
Wenn ich per CSS der DIV-Box (#inhaltframe) "overflow:hidden;" hinzufüge wir die smoothScroll-Funktion deaktiviert.
Sobald ich aber "overflow:hidden;" wieder entferne funktioniert das smoothScroll wieder aber die geladenen Inhalte werden natürlich nicht ausgeblendet ausserhalb der DIV-Box.
Kann mir jemand sagen woran das liegt und wie man das richtig machen kann?
Nachfolgend mal mein Quellcode:
Code <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>meineseite</title> <?php include ("includes/metatags.php");?> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.anchor.js" type="text/javascript"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <script src="js/jquery.smooth-scroll.min.js"></script> <script src="js/lightbox.js"></script> <script> jQuery(document).ready(function($) { $('a').smoothScroll({ speed: 2100, easing: 'easeInOutCubic' }); $('.showOlderChanges').on('click', function(e){ $('.changelog .old').slideDown('slow'); $(this).fadeOut(); e.preventDefault(); }) }); function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto:300,700,500' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/template.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> a:link { color: #000; text-decoration: none;} a:active { color: #000; text-decoration: none;} a:visited { color: #000; text-decoration: none;} a:hover { color: #000; text-decoration: none;} #inhaltframe { width:968px; height:595px; margin-right: auto; margin-left: auto; margin-top: 50px; overflow:hidden; } #menu { position:fixed; width:636px; height:73px; z-index:80; margin-right: auto; margin-left: 330px; margin-top: 490px; } #logo { position:absolute; width:258px; height:73px; z-index:22; left: 378px; top: 1px; } /* Horizontales Menü (id=navi) */ /* style the outer div to give it width */ .menu { width:636px; height:73px; left: 20px; position: relative; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin-top:0px; list-style-type:none; } .menu ul ul { width:auto; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li { float:left; width:auto; position:relative; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; font-family: verdana; border-right: 1px solid #000000; font-size:0.8em; font-weight: bold; color:#000000; height: 20px; width:auto; height:80px; border:0px solid #fff; border-width:0px 0px 0 0; padding-left:5px; padding-right:5px; line-height:75px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { width:auto; w\idth:auto; } /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited { } /* style the second level hover */ .menu ul ul a.drop:hover { } .menu ul ul :hover > a.drop { } /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited { } /* style the third level hover */ .menu ul ul ul a:hover{ } .menu ul ul ul :hover > a { } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; bottom:10px; left:0; width:150px; } * html .menu ul ul { bottom:30px; } /* position the third level flyout menu */ .menu ul ul ul{ left:150px; bottom:0; width:150px; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left { left:-150px; } /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:#000; height:auto; line-height:0.5em; padding:5px 10px; width:129px; font-size:0.8em; /* yet another hack for IE5.5 */ } * html .menu ul ul a{ width:150px; w\idth:129px; } /* style the top level hover */ .menu a:hover{ color:#fff; } .menu ul ul a:hover{ background-color: #ffffff; } .menu :hover > a, .menu ul ul :hover > a { color:#000000; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible; height:auto; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{ display:none; } /* keep the fourth level hidden when you hover on second level list OR link */ .menu ul :hover ul :hover ul ul{ display:none; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ display:block; bottom:0; } /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul { display:block; bottom:0; } </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="menu"> <div class="menu"> <ul> <li><a href="#stop3">Menupunkt1<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#stop4">Menupunkt2<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#stop5">Menupunkt3<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#stop6">Menupunkt4<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </div> <div id="logo"> <p><a href="#stop1"><img src="images/meinlogo.png" alt="Logo_Zur Startseite" border="0"></a></p> </div> </div> <div id="inhaltframe"> <?php include ("seite1.php");?> <?php include ("seite2.php");?> <?php include ("seite3.php");?> <?php include ("seite4.php");?> <?php include ("seite5.php");?> <?php include ("seite6.php");?> <?php include ("seite7.php");?> </div> </body> </html>