Проблема с JQuery перемещая страницу в положение

Здесь я перемещаю код html и js (я использую Laravel) и изюм, что одна из моих кнопок Nav не функционирует, это тот, кто говорит "Симптомы", когда clickeo не делает scroll до части симптомов, другие два "Профиль" и "Контакт", если они функционируют хорошо.

jQuery(document).ready(function(){
  /* para el scroll fluido y suave */
var perfil = $('#Perfil');
var sintomas = $('#sintomas');
var contacto = $('#contacto');

    if(perfil.length)
    {
      var contentPerfil = perfil.offset().top;

      $('#btn-perfil').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
          scrollTop : perfil
        }, 500);
      });
    }

    else if(sintomas.length)
    {
      var contentSintomas = sintomas.offset().top;

      $('#btn-sintomas').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
          scrollTop : sintomas
        }, 500);
      });
    }

    else if(contacto.length)
    {
      var contentContacto = contacto.offset().top;

      $('#btn-contacto').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
          scrollTop : contacto
        }, 500);
      });
    }
});
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
      <meta charset="utf-8" />
      <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
      <!-- aqui va el favicon -->
      <link rel="icon" href="{{ asset('images/casa.png') }}">
      <!-- -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>@yield('title', 'Neumología')</title>
      <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
      <!--     Fonts and icons     -->
      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
      <!-- CSS Files -->
      <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
      <link href="{{ asset('css/material-kit.css?v=2.1.1') }}" rel="stylesheet" />
      <link href="{{ asset('css/estilos.css') }}" rel="stylesheet">
      <link rel="stylesheet" href="{{ asset('css/animate.css') }}">
    </head>
    <body class="@yield('body-class')">
      <nav class="navbar fixed-top navbar-expand-lg bg-primary">
        <div class="container">
          <a class="navbar-brand" href="{{ url('/') }}">Neumología</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="sr-only">Toggle navigation</span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#perfil" id="btn-perfil">Perfil</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#sintomas" id="btn-sintomas">Sintomas</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contacto" id="btn-contacto">Contacto</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="wrapper">
        @yield('content')
      </div>
      <footer class="footer footer-default">
        <div class="container">
          <div class="copyright float-right">
            &copy;
            <script>
              document.write(new Date().getFullYear())
            </script>, hecho por <i class="material-icons">favorite</i>
            <a href="https://www.facebook.com/Eiruweb/" target="_blank">Cecilia Benítez Casaccia</a>, por una mejor web.
          </div>
        </div>
      </footer>
      <!--   Core JS Files   -->
      <script src="{{ asset('/js/core/jquery.min.js') }} " type="text/javascript"></script>
      <script src="{{ asset('/js/core/popper.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('/js/bootstrap.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('/js/core/bootstrap-material-design.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('/js/plugins/moment.min.js') }}"></script>
      <!--	Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
      <script src="{{ asset('/js/plugins/bootstrap-datetimepicker.js') }}" type="text/javascript"></script>
      <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
      <script src="{{ asset('/js/plugins/nouislider.min.js') }}" type="text/javascript"></script>
      <!--	Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs  -->
      <script src="{{ asset('/js/plugins/bootstrap-tagsinput.js') }}"></script>
      <!--	Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
      <script src="{{ asset('/js/plugins/bootstrap-selectpicker.js') }}" type="text/javascript"></script>
      <!--	Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
      <script src="{{ asset('/js/plugins/jasny-bootstrap.min.js') }}" type="text/javascript"></script>
      <!-- Place this tag in your head or just before your close body tag. -->
      <script async defer src="https://buttons.github.io/buttons.js"></script>
      <!-- Control Center for Material Kit: parallax effects, scripts for the example pages etc -->
      <script src="{{ asset('/js/material-kit.js?v=2.1.1') }}" type="text/javascript"></script>
      <!-- animations on scroll -->
      <script src="{{ asset('/js/wow.min.js') }}"></script>
      <script>
          new WOW().init();
      </script>
      <!-- Main js -->
      <script src="{{ asset('/js/main.js') }}" type="text/javascript"></script>
    </body>
</html>

@extends('layouts.app')

@section('title', 'Neumología')

@section('body-class', 'profile-page sidebar-collapse')

@section('content')
 <div class="page-header header-filter" data-parallax="true" style="background-image: url('/images/portada.jpg'); height: 700px;">
   <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="title text-center animated fadeInDown">Neumologo infantil</h1>
          <h4 class="text-center wow fadeInDown">Atendemos a todo tipo de niños con problemas respiratorios.</h4>
        </div>
      </div>
    </div>
 </div>
 <div class="main main-raised">
   <div class="profile-content">
     <div class="container" id="perfil">
       <div class="row">
         <div class="col-md-6 ml-auto mr-auto">
           <div class="profile">
             <div class="avatar">
               <img src="{{ asset('/images/Dr. Bernardo Sánchez.jpg') }}" alt="Circle Image" class="img-raised rounded-circle img-fluid">
             </div>
             <div class="name">
               <h3 class="text-center title wow slideInDown">Dr. Bernardo Sanchez Torres</h3>
               <h6 class="text-center wow slideInUp">Neumologo pediatra</h6>
             </div>
           </div>
         </div>
       </div>
       <div class="description text-center wow slideInUp">
         <p>
           La neumologia pediátrica es una rama de la pediatría que se encarga del estudio y manejo de las entidades que
           afectan a todo el sistema respiratorio en los niños, tanto en las vias aéreas altas como bajas.
         </p>
         <p>
           Un Neumologo pediatra se encarga de diagnosticar y tratar tanto padecimientos respiratorios agudos como crónicos
           en los niños.
         </p>
       </div>
       <div class="tab-content tab-space">
          <div class="tab-pane active text-center gallery">
            <div class="row">
              <div class="col-md-3 ml-auto">
                <img src="{{ asset('/images/foto1.jpg') }}" class="rounded">
                <img src="{{ asset('/images/foto4.png') }}" class="rounded">
              </div>
              <div class="col-md-3 mr-auto">
                <img src="{{ asset('/images/foto3.jpg') }}" class="rounded">
                <img src="{{ asset('/images/foto2.jpg') }}" class="rounded">
              </div>
            </div>
          </div>
        </div>
     </div>
   </div>
   <div class="container" id="sintomas">
     <br>
     <div class="section text-center wow zoomIn">
       <h2 class="title wow slideInDown">Sintomas</h2>
         <div class="row">
           <div class="col-md-4">
             <div class="team">
               <p class="bold">¿Cuáles son los síntomas de la tos seca?</p>
               <ul>
                 <li>Necesidad permanente de toser</li>
                 <li>Toser sin expulsar mucosidad</li>
                 <li>Sensación de irritación, cosquilleo y sequedad en la garganta</li>
                 <li>La tos suena seca</li>
                 <li>Pecho despejado, sin repiqueteo ni congestión</li>
                 <li>La tos puede dificultar el sueño por la noche</li>
                 <li>Normalmente se siente cansado cuando sufre tos o resfriado.</li>
               </ul>
             </div>
           </div>
           <div class="col-md-4">
             <div class="team">
               <p class="bold">¿Cuáles son los síntomas del asma?</p>
               <ul>
                 <li>Tos con o sin producción de flema.</li>
                 <li>Retracción o tiraje de la piel entre las costillas al respirar.</li>
                 <li>Dificultad para respirar que empeora con el ejercicio o la actividad.</li>
                 <li>Sibilancias.</li>
               </ul>
             </div>
           </div>
           <div class="col-md-4">
             <div class="team">
               <p class="bold">¿Cuáles son los síntomas del resfriado?</p>
               <ul>
                 <li>Puede tener dolor de garganta, fiebre o escalofríos. Puede sentirse "adolorido".</li>
                 <li>Tiene goteo nasal, estornudos y escozor en la nariz.</li>
                 <li>Puede sentirse cansado o muy débil (fatigado), si tiene una enfermedad como un resfriado o influenza (gripe).</li>
                 <li>Puede sentir como si tuviera un "bulto" o algo atravesado en la garganta.</li>
                 <li>Podría tener un área blanca o grisácea en la parte posterior de la garganta. </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
       <br>
     </div>
   <div class="container" id="contacto">
     <br>
     <div class="section text-center wow zoomIn">
       <h2 class="title wow slideInDown">Contacto</h2>
       <div class="team">
         <p><span class="bold">Telefono:</span> (021) 2171717</p>
         <p><span class="bold">Dirección:</span> Avenida Gral. José Gervasio Artigas 1500</p>
       </div>
       </div>
       <div class="section text-center">
         <iframe class="embed" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14431.720737811691!2d-57.6072929!3d-25.2729339!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf90d2a67115f49e6!2sLA+COSTA!5e0!3m2!1ses!2spy!4v1550586213416" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
       </div>
       <br>
     </div>
 </div>
@endsection

)

0
задан 07.03.2019, 16:21
1 ответ

Я верю в то, что уже, что плохое

jQuery(document).ready(function(){
  /* para el scroll fluido y suave */
var perfil = $('#Perfil');
var sintomas = $('#sintomas');
var contacto = $('#contacto');

    if(perfil.length)
    {
      var contentPerfil = perfil.offset().top;

      $('#btn-perfil').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
          scrollTop : contentPerfil
        }, 500);
      });
    }

    else if(sintomas.length)
    {
      var contentSintomas = sintomas.offset().top;

      $('#btn-sintomas').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
          scrollTop : contentSintomas
        }, 500);
      });
    }

    else if(contacto.length)
    {
      var contentContacto = contacto.offset().top;

      $('#btn-contacto').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
          scrollTop : contentContacto
        }, 500);
      });
    }
});
1
ответ дан 02.12.2019, 05:55
  • 1
    Привет @Ceci_Eiruweb, ademá s размещения có я говорю решенный, ты мог бы добавлять в паре lí neas каковым было решение. Как для форматировать немного má s твой ответ. – Soluciones PyMES y Hogares 07.03.2019, 22:45

Теги

Похожие вопросы