Error in JQuery can not use two scripts at the same time

1

Hi, I'm doing a page, but adding some scripts only makes the last one and the first of them stops working. This is the code:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Copiadoras y Suministros del Mayab</title>
    <link rel="shortcut icon" href="img/CSM-icon.ico"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body id="body">
    <!-- Nav -->
    <div class="navbar navbar-fixed-top navbar-inverse" id="nav" role="navigation">
        <div class="container">
            <div class="col-lg-12">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" href="index.php"><img src="img/oie_transparent.png" alt="" width="60"></a> 
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php"><i class="fa fa-home" aria-hidden="true"></i> INICIO</a></li>
                        <li><a href="servicios.php"><i class="fa fa-archive"></i> SERVICIOS</a></li>
                        <li><a href="#"><i class="fa fa-print" aria-hidden="true"></i> PRODUCTOS</a></li>
                        <li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> CONTACTO</a></li>
                        <li><a href="#"><i class="fa fa-users" aria-hidden="true"></i> NOSOTROS</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div><br><br><br>

    <!--Container-->
    <div class="container">
        <div class="col-lg-12" align="center">
            <h2>SERVICIOS</h2><br><br>
            <figure>
                <img src="img/servicioprueba.png" class="img-responsive" alt="ciclos">
            </figure>
        </div>
    </div><br>

    <div class="container" id="servicios">
        <div class="col-lg-12">
            <div class="col-lg-3">
                <h3>Renta</h3><br>
                <img src="img/renta2.jpg" width="220" alt=""><br><br>
                <p class="desServicios">Rentamos diferentes equipos de copiado y multifuncionales para cualquier tipo de empresa. <br> Sin la necesidad de realizar una fuerte inversion, y asi poder obtener un mayor ahorro y beneficios para su negocio con la mas alta tecnologia que se ofrece en el mercado. <a href="#renta" data-ancla="renta"><small> Ver mas <i class="fa fa-plus-square-o" aria-hidden="true"></i></small></a></p>
            </div>
            <div class="col-lg-3">
                <h3>Venta</h3><br>
                <img src="img/apreton.jpg" width="220" alt=""><br><br>
                <p class="desServicios">Contamos con la venta de equipos totalmente nuevos y con la mejor tecnologia disponible en estos momentos. <br> Somos distribuidores de las mejores y mas reconocidas marcas con los mejores precios del mercado. <a href="#venta" data-ancla="venta"><small> Ver mas <i class="fa fa-plus-square-o" aria-hidden="true"></i></small></a></p>
            </div>
            <div class="col-lg-3">
                <h3>Mantenimiento</h3><br>
                <img src="img/mantenimiento.jpg" width="207" alt=""><br><br>
                <p class="desServicios">Realizamos servicios tecnicos profesionales para su equipo de copiado o multifuncional. <br> 
                    <ul align="left">
                        <li>Mantenimiento Correctivo</li>
                        <li>Mantenimiento Preventivo</li>
                    </ul>
                </p> <a href="#mantenimiento" data-ancla="mantenimiento"><small> Ver mas <i class="fa fa-plus-square-o" aria-hidden="true"></i></small></a>
            </div>
            <div class="col-lg-3">
                <h3>Consumibles</h3><br>
                <img src="img/katun.png" width="260" alt=""><br><br>
                <p class="desServicios">Somos Distribuidores Autorizados de KATUN una de las mejores marcas del mercado internacional.  <a href="#consumibles" data-ancla="consumibles"><small> Ver mas <i class="fa fa-plus-square-o" aria-hidden="true"></i></small></a></p>
            </div>
        </div>
        <small>
            <p align="right">* Consumibles, mantenimientos y productos exclusivamente para nuestros clientes y equipos.</p>
        </small>
    </div><br>

    <div class="container" id="servicios">
        <div class="col-lg-12">
            <a name="renta" id="renta"></a><h3 id="tituloRenta"><i class="fa fa-print" aria-hidden="true"></i> Renta</h3>
            <article>
                <p class="textoServicios"><b>¿Porque Rentar?</b> A diario usted podra confiar en el equipo y tecnologia que esta utilizando para impulsar el crecimiento de su negocio. Es por eso que la renta de equipos le ofrece diversas ventajas sobre la compra de equipo que va quedando obsoleto con el paso del tiempo. El financiamiento de equipos permite a las empresas adquirir lo que necesitan a una tasa fija, por un determinado tiempo y sin necesidad de gastar su capital de inversión o de trabajo. <br><br>

        <div class="col-lg-12">
            <a name="venta" id="venta"></a><h3 id="tituloVenta"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Venta</h3>
            <article>
                <p class="textoServicios">Al adquirir un equipo con nosotros garantizamos un buen funcionamiento del equipo, </p>
            </article>
        </div>
        <div class="col-lg-12">
            <a name="mantenimiento" id="mantenimiento"></a><h3 id="tituloMantenimiento"><i class="fa fa-wrench" aria-hidden="true"></i> Mantenimiento</h3>
            <article>
                <p class="textoServicios">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta obcaecati est mollitia porro laudantium at, magnam ex vel libero nemo eos qui reprehenderit accusantium maxime nihil, commodi</p>
            </article>
        </div>
        <div class="col-lg-12">
            <a name="consumibles" id="consumibles"></a><h3 id="tituloConsumibles"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Consumibles</h3>
            <article>
                <p class="textoServicios">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed necessitatibus, repudiandae corporis nihil deleniti sint vel libero ad laudantium mollitia provident velit eveniet, explicabo dolorem.</p>
            </article>
        </div>
        <small>
            <p align="right">* Consumibles, mantenimientos y productos exclusivamente para nuestros clientes y equipos.</p>
        </small>
    </div>

    <!--Footer-->
    <footer class="page-footer center-on-small-only"><br>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12" id="inicioFooter">
                    <div class="col-lg-3" id="descripcion">
                        <h4 class="title">Copiadoras y Suministros del Mayab</h4>
                        <p>Somos una empresa que se ha consolidado como líder en el mercado de la industria del copiado.</p>
                    </div>
                    <div class="col-lg-3" id="copiadoras">
                        <h5 class="title">Copiadoras y multifuncionales</h5>
                        <ul>
                            <li><i class="fa fa-print" aria-hidden="true"></i><a href="http://www.ricoh.com.mx/" target="_blank"> RICOH</a></li>
                            <li><i class="fa fa-print" aria-hidden="true"></i><a href="http://copiadorassamsung.com.mx/" target="_blank"> SAMSUNG</a></li>
                            <li><i class="fa fa-print" aria-hidden="true"></i><a href="http://konicaminolta.com.mx/" target="_blank"> BIZHUB</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-3" id="consumibles">
                        <h5 class="title">Consumibles</h5>
                        <ul>
                            <li>Distribuidores Autorizados</li>
                            <li><i class="fa fa-gears" aria-hidden="true"></i><a href="http://www.katun.com/es/" target="_blank"> KATUN</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-3" id="conocenos">
                        <h5 class="title">CSM</h5>
                        <ul>
                            <li><i class="fa fa-check" aria-hidden="true"></i><a href="index.php"> INICIO</a></li>
                            <li><i class="fa fa-check" aria-hidden="true"></i><a href="servicios.php"> SERVICIOS</a></li>
                            <li><i class="fa fa-check" aria-hidden="true"></i><a href="#!"> PRODUCTOS</a></li>
                            <li><i class="fa fa-check" aria-hidden="true"></i><a href="#!"> CONTACTO</a></li>
                            <li><i class="fa fa-check" aria-hidden="true"></i><a href="#!"> NOSOTROS</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="call-to-action">
            <ul>
                <li><h3>Cotiza con Nosotros</h3></li>
                <li><a href="cotiza.php" class="btn btn-danger">Cotizar</a></li>
            </ul>
        </div>

        <hr><br>

        <div class="social-section">
            <div class="col-lg-6">
                <ul>
                    <li>
                        <a href="" target="_blank" class="btn-floating btn-small btn-fb">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x" id="fb"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span> Siguenos en Facebook
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-6">
                <ul>
                    <li>
                        <a href="" target="_blank" class="btn-floating btn-small btn-ins">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x" id="skype"></i>
                                <i class="fa fa-skype fa-stack-1x fa-inverse"></i>
                            </span> Contactanos por Skipe (Clic Aqui)
                        </a>
                    </li>
                </ul>
            </div>
        </div><br><br><br>
        <div class="footer-copyright">
            <div class="container-fluid">
                <p>Copyright &copy; 2017. CSM - Copiadoras y Suministros del Mayab. Todos los derechos reservados.</p>
            </div>
        </div><br>
    </footer>

    <!-- Scripts -->
    <script>
$('div a').click(function(e){               
    e.preventDefault();     //evitar el eventos del enlace normal
    var strAncla=$(this).attr('href'); //id del ancla
        $('body,html').stop(true,true).animate({                
            scrollTop: $(strAncla).offset().top
        },1000);

});
</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.peek.js"></script>
    <script>
        $('.navbar').peek({
            showDirection: "up", // What direction should the user be scrolling when the element is showing.
            toggleClass: "hidden", // Class used to hide the element.
            triggerDelta: 50, // After a user has scrolled more than this many pixels show or hide the target element.
            triggerElement: window // Element to bind the scroll event to.
        });
    </script>
</body>
</html>
    
asked by Emmanuel Vidal 16.05.2017 в 18:55
source

1 answer

2

You must load after of jQuery all the scripts that use this library.

In your case, it's as simple as passing the inline scripts to the end.

<html>
  <head>...</head>
  <body>
    <!-- tu página -->
    ... 
    <!-- scripts -->
    <!-- primero jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- luego los scripts que usan jQuery -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.peek.js"></script>

    <script>
      // aqui ponemos los script inline
      $('div a').click(function(e){               
        e.preventDefault();     //evitar el eventos del enlace normal
        var strAncla=$(this).attr('href'); //id del ancla
        $('body,html').stop(true,true).animate({                
            scrollTop: $(strAncla).offset().top
        },1000);
      });

      $('.navbar').peek({
        showDirection: "up", // What direction should the user be scrolling when the element is showing.
        toggleClass: "hidden", // Class used to hide the element.
        triggerDelta: 50, // After a user has scrolled more than this many pixels show or hide the target element.
        triggerElement: window // Element to bind the scroll event to.
      });
    </script>
  </body>
</html>
    
answered by 16.05.2017 в 21:26