html - Hjælp til gennemgående menu i top og anchor tags - Udvikleren.dk

Tags: html css anchor

Bruger #17390 @ 07.11.13 09:11

Hej alle.

Jeg er igang med min portfolio men er desværre gået i stå, da jeg har et problem med min gennemgående menu som er i toppen hele tiden, så brugeren altid kan komme hurtigt rundt på siden.

Problemet er at min øverste menu er 34px høj(mener jeg) og når jeg linker til en div længere nede på siden, så tager den i udgangspunkt i browserens top, men jeg vil gerne have at den tager min top menu's bund, så min menu ikke overlapper

Håber at nogen kan hjælpe

En fiddle til de dovne

http://jsfiddle.net/Z4h3v/

HTML kode

 <!DOCTYPE html>
 <html>
     <head>
         <title>
         <?php
         
         $side_titel = "Morten Christiansen";
         
         if (isset($side_titel))
         {
             echo $side_titel;
         }
         else
         {
             echo "Morten";
         }
         ?>
         </title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" type="text/css" href="style/style.css">
         <script src="js/jquery-1.10.2.min.js"></script>
         <script src="js/smoothscroll.js"></script>
     </head>
     <body>
          <div id="nav">
                <ul>        
                 <li><a href="#start">Start</a></li>
                 <li><a href="#profil_content">Profil</a></li>
                 <li><a href="#referencer">Referencer</a></li>
                 <li><a href="#projekter">Projekter</a></li>
             </ul>
         </div>
          <a id="start"></a>
         <div id="wrapper">
             <img id="startbillede" src="img/Morten.jpg" />
             <div id="startinfo">
                 <h1>Morten Christiansen</h1>
                 <h2>Webintegrator & Webudvikler</h2>
                 <hr />
                 <p><span class="pcolor">Email: morten1691@gmail.com</span></p>
                 <p><span class="pcolor">Steam: Kh4zy</span></p>
                 <p><span class="pcolor">Facebook: Morten.Christiansen.359</span></p>
             </div>
             <div id="profil_content">
                 <h3 class="h3_underline"">Profil</h3>
                     <hr class="greyhr"  />
                     <div id="profilinfo">
                         <p class="indhold_skrift2">Altid frisk & klar på webudvikling efter dine behov!</p>
                         <hr class="greyhr" />
                         <p class="indhold_skrift">Mit navn er Morten Christiansen. Jeg er 22 år & bosat i Nykøbing F. Jeg er igang med at uddanne mig som Web-Integrator på Roskilde Tekniske Skole CMK.
                         Jeg går på hovedforløbet og forventer at være færdig d. 19-12-2014.</p>
                         <p class="indhold_skrift">Jeg elsker og brænder for webprogrammering & udvikling!</p>
                     </div>
                     <ul id="skill">
                         <li><span class="bar html_css">100%</span><h3>HTML & CSS</h3></li>
                         <li><span class="bar php">20%</span><h3>PHP & MySQL(i)</h3></li>
                         <li><span class="bar grafisk_design">99%</span><h3>GRAFISK DESIGN</h3></li>
                         <li><span class="bar jquery">25%</span><h3>jQuery</h3></li>
                     </ul>
             </div>
 
             <div id="cv_content">
                 <h3 class="h3_underline">CV</h3>
                 <hr class="greyhr" />
             </div>
             
             <div id="referencer_content">
                 <a id="referencer"></a>
                 <h3 class="h3_underline">Referencer</h3>
                 <hr class="greyhr" />
             </div>
             
             <div id="projekter_content">
                 <h3 class="h3_underline">Projekter</h3>
                 <hr class="greyhr" />
             </div>
           </div>
     </body>
 </html>

CSS kode

 /*RESET*/
 *{
     margin:0px;
     padding:0px;
     border:0;
 }
 
 body{
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     background:#2b2b2b;
 }
 
 h1{
     text-transform:uppercase;
     font-size:29px;
     padding:0 0 6px 0;
 }
 
 #toph1{
     font-size:90px;
     color:#FFF;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 }
 
 h2{
     text-transform:uppercase;
     font-size:18px;
     font-weight:normal;
 }
 
 .h3_underline{
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-transform:uppercase;
     font-size:14px;
     font-weight:normal;
     padding:0 0 3px 0;
     border-bottom:2px solid #669;
     display:table;
 }
 
 h4{
     background:#669;
     color:#fff;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-transform:uppercase;
     font-size:30px;
     padding:10px;
 }
 
 p{
     margin-bottom:15px;
 }
 
 .indhold_skrift{
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     margin-bottom:15px;
 }
 
 .indhold_skrift2{
     font-size:30pt;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     margin-bottom:15px;
 }
 
 #wrapper{
     width:763px;
     height:2000px;
     margin:0px auto;
 }
 
 #nav{
     width:100%;
     position:fixed;
     text-align:center;
     z-index:10;
     background:#669;
 }
 
 #nav ul{
     width:768px;
     margin:auto;
     /*position:relative;*/
 }
 
 #nav ul li{
     display:inline-block;
     list-style:none;
 }
 
 #nav ul li a{
     font-weight:bold;
     line-height:53px;
     padding:20px;
     text-decoration:none;
     text-transform:uppercase;
     color:rgba(255,255,255,1);
 }
 
 #nav ul li a:hover{
     background:#535398;
      -webkit-transition: background-color 400ms linear;
      -moz-transition: background-color 400ms linear;
      -o-transition: background-color 400ms linear;
      -ms-transition: background-color 400ms linear;
      transition: background-color 400ms linear;
 }
 
 #startbillede{
     height:194px;
     border:10px solid #fff;
     margin:102px 20px 0 0;
     float:left;
 }
 
 #startinfo{
     background:#fff;
     padding:10px;
     height:194px;
     float:right;
     margin:102px 0 0 0;
 }
 
 .pcolor{
     padding:3px;
     font-size:16px;
     font-weight:bold;
     color:#fff;
     background:#669;
     text-transform:uppercase;
 }
 
 hr{
     background:#669;
     height:6px;
     margin:19px 0 18px 0;
 }
 
 .greyhr{
     background:#ddd;
     height:1px;
 }
 
 ::-webkit-scrollbar {
     width: 20px;
 }
  
 ::-webkit-scrollbar-track {
     background:#FFF;
 }
 
 ::-webkit-scrollbar-track-piece     {
     background:#FFF;
     /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);*/
 }
  
 ::-webkit-scrollbar-thumb {
     background:#669;
     border:2px solid #000;
 }
 
 /*SKILLS*/
 
 #profil_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:10px 0 10px 0;
 }
 
 #profil{
 }
 
 #skill{ 
     list-style:none;
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
     font-size:12px;
     width:317px;
     margin:0 0 0 20px;
     position: relative;
     line-height: 2em;
     padding: 30px 0;
     float:left;
     height:230px;
 }
 
 #skill li{
     margin-bottom:50px; 
     height:24px;       
 }
 
 #skill li h3 { 
     position:relative; 
     top:-25px;
 }
 
 .bar{
     margin:2px;
     height:24px; 
     position:absolute;
     color:#FFF;
     font-weight:bold;
     padding:6px 0 6px 20px;    
 }
 
 .html_css{
     width:100%; 
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 
 }
 
 .php{
     width:20%;
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 }
 
 .grafisk_design{
     width:99%;
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 }
 
 .jquery{
     width:25%;
     background: #8080aa; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODBhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzdiN2JhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzVmNWY4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2ODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #8080aa 0%, #7b7ba5 17%, #5f5f8a 74%, #565680 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8080aa), color-stop(17%,#7b7ba5), color-stop(74%,#5f5f8a), color-stop(100%,#565680)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #8080aa 0%,#7b7ba5 17%,#5f5f8a 74%,#565680 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8080aa', endColorstr='#565680',GradientType=0 ); /* IE6-8 */
 }
 
 @-moz-keyframes grafisk_design {0%  { width:0px;} 100%{ width:100%;}  }
 @-moz-keyframes html_css        { 0%  { width:0px;} 100%{ width:90%;}  }
 @-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
 @-moz-keyframes php   { 0%  { width:0px;} 100%{ width:80%;}  }
 
 @-webkit-keyframes grafisk_design       { 0%  { width:0px;} 100%{ width:100%;}  }
 @-webkit-keyframes html_Css        { 0%  { width:0px;} 100%{ width:90%;}  }
 @-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
 @-webkit-keyframes php   { 0%  { width:0px;} 100%{ width:80%;}  }
 
 
 #profilinfo{
     width:350px;
     background:#fff;
     float:left;
 }
 
 #cv_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:0 0 10px 0;
 }
 
 #referencer_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:0 0 10px 0;
 }
 
 #projekter_content{
     width:723px;
     background:#fff;
     padding:20px;
     float:left;
     margin:0 0 100px 0;
 }

7 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 07.11.13 10:22

1.258

Du skal have lavet din javascript om.

JScript kode

 $(document).ready(function(){
     $('a[href^="#"]').on('click',function (e) {
         e.preventDefault();
 
         var target = this.hash,
         $target = $(target);
 
         $('html, body').stop().animate({
             'scrollTop': $target.offset().top
         }, 900, 'swing', function () {
             window.location.hash = target;
         });
     });
 });

Lav den om til:

JScript kode

 $(document).ready(function(){
     $('a[href^="#"]').on('click',function (e) {
         e.preventDefault();
 
         var target = this.hash,
         $target = $(target);
 
         $('html, body').stop().animate({
             'scrollTop': ($target.offset().top  75) + "px"
         }, 900, 'swing', function () {
             window.location.hash = target;
         });
     });
 });

Som en anden note, så tænker jeg du skal slette de der % anvisninger, for hvad viser de egentlig? Som arbejdsgiver kan man ikke bruge det til en skid. Du kan 100% HTML/CSS ... men 100% af hvad? 100% af HTML/CSS specifications eller hvad :/?

Indlæg senest redigeret d. 07.11.2013 10:29 af Bruger #17081

Bruger #17390 @ 07.11.13 11:15

Får fejl på linje 9 på din ændring af javascriptet

Bruger #17719 @ 07.11.13 11:29

-23

@Morten

Er det eneste du ville opnå, at din menu skal lyse lidt op når man hover elementet?

Så jeg forstår det præcise spørgsmål.

Indlæg senest redigeret d. 07.11.2013 11:32 af Bruger #17719

Bruger #17390 @ 07.11.13 12:06

@Morten

Er det eneste du ville opnå, at din menu skal lyse lidt op når man hover elementet?

Så jeg forstår det præcise spørgsmål.

Når du klikker på profil, så burde du kunne se at topmenuen overlappen teksten profil, som den linker til.

Problemet er bare at min topmenu overlapper den, og ved ikke hvad jeg skal gøre.

Har prøvet med # tags andre steder, men det er ikke lykkedes

Bruger #17081 @ 07.11.13 12:09

1.258

Får fejl på linje 9 på din ændring af javascriptet

Selvfølgelig gør du det, jeg er også kommet til, at lave en fejl

Prøv det her:

JScript kode

 $(document).ready(function(){
      $('a[href^="#"]').on('click',function (e) {
          e.preventDefault();
  
          var target = this.hash,
          $target = $(target);
  
          $('html, body').stop().animate({
              'scrollTop': ($target.offset().top - 75) + "px"
          }, 900, 'swing', function () {
              window.location.hash = target;
          });
      });
  });

Bruger #17390 @ 07.11.13 13:13

Får fejl på linje 9 på din ændring af javascriptet

Selvfølgelig gør du det, jeg er også kommet til, at lave en fejl

Prøv det her:

JScript kode

 $(document).ready(function(){
      $('a[href^="#"]').on('click',function (e) {
          e.preventDefault();
  
          var target = this.hash,
          $target = $(target);
  
          $('html, body').stop().animate({
              'scrollTop': ($target.offset().top - 75) + "px"
          }, 900, 'swing', function () {
              window.location.hash = target;
          });
      });
  });

Nice

Tusind tak for hjælpen.

er der en måde man kan gøre så den der javascript automatisk vil scrolle ned til projekter, selvom der ikke er nok plads?

Ved ikke hvor meget indhold der bliver i diven og synes at det ser dumt ud med en stor padding i bunden, for at Projekter skal kunne ramme toppen

Edit: Har fundet ud af at min wrapper skal ca være 2000px for at den kan nå alle mine # links, så håber at du kan hjælpe mig )

Er der også en måde at gemme urlen på?

Håber ikke at det er for meget at spørge om

På forhånd tak

Indlæg senest redigeret d. 07.11.2013 13:15 af Bruger #17390

Bruger #17081 @ 07.11.13 13:19

1.258

Den kan jo ikke komme længere ned fordi der rent fysisk ikke er noget indhold på siden til, at scrolle forbi. Så derfor kommer det kun til, at virke hvis du putter mere indhold ind

Hjælp til gennemgående menu i top og anchor tags

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler