Same page multiple links not working

Question

I’ve got tree links to sections in the same page, but in every page reload just 2 work to the place they should go. I’m posting the whole code. It uses a JQuery animation, tough I don’t include it in my code I still have the same issue.

Here’s the Fiddle link

https://jsfiddle.net/xfxweL5u/

Here’s the HTML









Sistemas de Radiocomunicación México | SERCOM










Marcas
Catálogos
Contacto







Sistemas de Radiocomunicación México

Diseñando soluciones especializadas en CCTV






Acerca de Nosotros


Servicios Electrónicos de Radiocomunicación, somos una empresa de integración profesional de equipos de radiocomunicación que inicio operaciones el 1 de Enero de 1997, en la cuidad de Toluca, Estado de México.
Somos orgullosamente parte de la familia de con el objetivo de prestar servicios de consultoría, asesoría y soporte técnico de equipos y programas de radiocomunicación, además del desarrollo de proyectos de conectividad, redes y telecomunicaciones tanto de área local, amplia y extendida así como la prestación de servicios y soporte en el área de comunicación digital y convencional.

Muestra de clientes



Nuestras marcas










Catálogos


Descarga nuestra lista de catálogos en PDF (compatible con dispositivos móviles).


Radios Kenwood
Radios Motorola
Radios iCOM
Kenwood 2015
Motorola 2015
iCOM 2015







Contacta con nosotros
¿Necesitas servicios de consultoría, asesoría o soporte técnico de equipos?
Te ayudaremos a escojer exactamente los productos que necesitas.
Tenemos la cotizaciones justas para tus necesidades, no dudes en preguntar por nuestras promociones.








Teléfono
+52 (722) 216-7450




Dirección
Carlos Hank No. 112-A
Col. El Cielo
Toluca, Edo. de México. CP 56420.





Correo
contacto@sercom.mx






Servicios de Radiocomunicación México

Catálogos

Radiocomunicación
Radios Kenwood
Radios Icom
Seguridad
Distribuidor autorizado Syscom



Servicios

Acerca de Sercom
Calidad de los productos
Código de ética
Política de garantía
Política de devolución
Aviso de privacidad
Contacto



Soporte

Frecuencias de uso libre
Homologaciones
Garantías, devolución y reparación
Mapa del sitio
Quejas y sugerencias

And the CSS

html, body, nav, div, main, p, ul, li, h1, h2{
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    overflow: hidden;

}

body {
    perspective: 1px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

li {
    list-style: none;
    margin: 0;
    padding: 0;
    list-style-position: none;
}

body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

main {
    background: #fff;
}

nav {
    z-index: 100;
    width: 100%;
    position: fixed;
    background: linear-gradient(45deg, #293B8F, #3C57A6);
    height: auto;
    font-family: "Futura";
    color: #fff;
    font-size: 1rem;
}

.logo {
    margin: 20px 30px;
    height: 40px;
}

nav ul {
    list-style: none;
    display: inline-block;
    float: right;
    margin-top: 40px;
    margin-right: 20px;
}

nav li {
    display: inline-block;
    margin: 0 10px;
}

h2 {
    width: 100%;
}
.section-title {
    font-family: 'Futura';
    text-transform: uppercase;
    font-weight: bold;
    color: #293B8F;
    border-bottom: 3px solid #293B8F;
    width: 30%;
    margin-right: 70%;
    margin-bottom: 30px;
}

.catalogs-list li{
    background: url('img/sercom-doc-logo.png') no-repeat;
    background-size: 17px;
    margin: 5px 0;
    padding-left: 25px;
}

#search {
    height: 15px;
}

#contact-banner {
    color: #fff;
    background: linear-gradient(
      rgba(60, 87, 166, 0.6), 
      rgba(60, 87, 166, 0.6)
    ),url(img/contact-us.jpg) no-repeat center center; 
    height: 300px;
    text-align: center;
    text-shadow: 0 0 20px #000;
    padding: 160px 5% 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contact-banner h2 {
    font-family: "Futura";
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 30px;
}

#contact-banner p {
    font-size: 1.4rem;
    font-weight: 300;
}

/*                                  CHANGING TEXT                               */

#sercom-logo {
    width: 80px;
    display: block;
    margin: -50px auto 10px;
}

#separator {
    width: 20%;
    height: 1px;
    background: #FFF;
    margin: 30px auto;
}

#solutions-in {
    margin: 20px 0;
    font-size: 1.4rem;
    font-family: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, sans-serif;
    text-transform: none;
    font-weight: 200;
}

#changing-text {
    color: #FFF;
    font-weight: 600;
}

.nav-bar-wrapper {
    width: 80%;
    margin: 50px 10%;
}

.contact-wrapper::before, .contact-wrapper::after {
    content:"";
    display: table;
    clear:both;
}

.nav-bar-wrapper::before, .nav-bar-wrapper::after {
    content:"";
    display: table;
    clear:both;
}

.nav-bar-column {
    width: 33.33%;
    float: left;
    padding-bottom: 50px;
}

span {
    color: #3C57A6;
    font-weight: 500;
}

a {
    text-decoration: none;
    color: inherit;
}

a:active {
    color: inherit;
}

a:visited {
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

.columns-wrapper {
    padding: 100px 10%;
    width: 80%;
}

.columns-wrapper::before, .columns-wrapper::after {
    content:"";
    display: table;
    clear:both;
}

.about-us-content {
    line-height: 1.5789;
    font-weight: 300;
    width: 100%;
    font-size: 1.1rem;
}

.about-us-content p {
    margin-bottom: 20px;
}

.about-us-content a:hover {
    color: #3C57A6;
}

.product-brand {
    float: left;
    margin: 10px;
    width: 240px;
    height: 240px;
    background: #ddd;
}


#icom {
    background: url(img/icom-logo.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#motorola {
    background: url(img/motorola-logo.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

input#search-input {
    font-size: 1rem;
    border: none;
    margin: none;
    margin-left: -15px;
    padding: 0px;
    background: none;
    color: #FFF;
}

#search-input:focus {
    outline: none;
}

::-webkit-input-placeholder {
   color: #BBB;
} :-moz-placeholder { /* Firefox 18- */
   color: #BBB;  
} ::-moz-placeholder {  /* Firefox 19+ */
   color: #BBB;  
} :-ms-input-placeholder {  
   color: #BBB;  
}

#kenwood {
    background: url(img/kenwood-logo.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.nav-bar-wrapper > p {
    border-bottom: 1px solid #888;
    border-top: 1px solid #888;
    padding: 10px 20px;
    color: #888;
    margin: 20px 0;
    margin-bottom: 40px;
}

.nav-bar-column ul{
    margin: 10px 0;
}

.nav-bar-column li, .nav-bar-column ul {
    font-size: .9rem;
    font-weight: 300;
    margin: none;
    float: none;
    display: block;
}

.nav-bar-column li {
    margin: 5px 0;
}

.contact-wrapper {
    margin: 100px 10%;
    width: 80%;

}

.contact-column {
    float: left;
    width: 33.33%;
    text-align: center;
}

.contact-wrapper a {
    color: inherit;
    text-decoration: none;
}

.contact-icon {
    width: 150px;
    margin-bottom: 10px;
}

#contact-link{
    padding-top: 250px;
    text-align: center;
    font-size: 2rem;
    color: #293B8F;
}

#contact-link a:hover {
    text-decoration: underline;
}

/*                      PARALLAX EFFECT                         */

.slide {
    position: relative;
    padding: 25vh 10%;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    transform-style: inherit;
}

.slide p {
    padding-top: 0px;
    text-align: center;
    font-family: "Futura";
    font-size: 1.6rem;
    color: #fff;
    text-transform: uppercase;
/*  text-shadow: 0 0 20px #000;*/
}

.slide:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.slide:nth-child(2n) .title {
    margin-left: 0;
    margin-right: auto;
}

.slide,
.slide:before {
    background: 50% 50% / cover;
}

#slide1:before {
    background-image: url("img/background.jpg");
    transform: translateZ(-1px) scale(2);
    z-index: -1;
}
/*                      END                         */
/*                      PARALLAX EFFECT                         */

@media screen and (max-width: 700px) and (orientation: portrait){

/*  html {
        overflow: inherit;
    }

    body {
        perspective: none;
        overflow-y: inherit;
        overflow-x: inherit;
    }

    .slide {
    background-size: 100%;
    background: url("img/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: inherit;
    padding: none;
    min-height: none;
    width: 100%;
    box-sizing: block;
    transform-style: none;
    }

    #slide1:before {
    background-image: none;
    transform: none;
    z-index: 0;
    }*/

    #sercom-logo {
        margin-top: 10px;
    }

    #about-us-title {
        width: 80%;
        font-size: 1.2rem;
        margin: 0 10%;
    }

    #contact-banner {
        padding-top: 50px;
    }

    #contact-banner h2 {
        font-size: 1.8rem;
    }


    #contact-banner p {
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.3;
    }

    #about-us-info {
        padding-top: 40px;
        width: 80%;
        margin: 0 10%;
    }

    .contact-column {
        padding: 40px 0;
        width: 100%;
    }

    .contact-icon {
        width: 100px;
        margin-bottom: 0px;
    }

    .logo {
        width: 50%;
        margin: 20px 25% 10px 25%;
    }

    nav ul {
        margin: 10px 0 20px 0;
        width: 100%;
        text-align: center;
    }

    h3 {
        margin: 5px 0;
    }

    #about-us-title {
    border-bottom: 5px solid #293B8F;
    }

    .nav-bar-wrapper {
        margin: 10px 10%;
    }
}

Sukrit · Accepted Answer

Couple of things here. Firstly, for a large file like this you should submit a formatted version in ready to run state. (usually done through jsFiddle)

That said, your div's for catalogos and contacto just happen to be on the same page, so essntially both of them are working but since there is no more content below the catalogos section, they seem to be on the same page.

Also, just a note here, you may want to use the div's containing you id's as wrapper instead of just an empty div on the page.

Hope that helps!

Same page multiple links not working

Answers (1)

Related Questions