Smooth Scroll bei der Auswahl ändern jquery

Question

Ich versuche, auf Dropdown-Auswahl ändern reibungslos zum Anker zu scrollen. Habe viel Code von anderen Antworten ausprobiert, konnte ihn aber nicht zum Laufen bringen, da ich keine Erfahrung mit jQuery habe. Jede Hilfe wäre willkommen! PS: dont die Verbindungsauswähler dagegen, wenn Aussagen

hier mein Dropdown ist

<select class="form-control " id="dropDownSelect" onchange="location = this.value;"> 
            <option value="#">Hotel Selection</option> 
            <option value="#ecoHotel">EcoName</option> 
            <option value="#luxuryHotel">LuxuryName</option> 
           </select> 

und hier sind die jquery i in

<script> 


    $("#dropDownSelect").change(function() { 
     console.log(this.value); 

     // Here Should be my smoothscroll  

     if (this.value === "#luxuryHotel") { 
      $("#inqLink").attr('href', "http://www.google.com"); 
     } 
     else{ 
      $("#inqLink").attr('href', "package-dentmodern-hollywoodsmile-inquire.html"); 
     } 


    }); 




</script> 

Answer 1

Ich habe eine andere Lösung für Sie. Machen Sie Ihre eigene dropdown, auf diese Weise ist es einfacher für Sie zu erreichen, was Sie wollen. Ich habe alle Drop-Down-Funktionen mit JQuery, müssen Sie nur auf Stil Dropdown:

$(document).ready(function(){ 
 

 
    $('.target-click').click(function(){ 
 
    $('.hidden-drop').slideToggle(); 
 
    }) 
 
     $('nav li a').click(function(e) { 
 
     setTimeout(function(){ 
 
     $('.hidden-drop').slideUp(); 
 
     }, 200); 
 
    $('html, body').animate({ 
 
     scrollTop: $($(this).attr('href')).offset().top 
 
    }, 600); 
 
    return false; 
 
    }); 
 
    });

select { 
 
    margin-bottom: 30px; 
 
} 
 
#ecoHotel { 
 
    background-color: lightgreen; 
 
} 
 
#luxuryHotel { 
 
    background-color: lightgrey; 
 
} 
 
.page { 
 
    display: block; 
 
    height: 100vh; 
 
    width: 100%; 
 
    transition: all .3s ease; 
 
} 
 
.hidden-drop { 
 
    display: none; 
 
} 
 
ul li { 
 
    cursor: pointer; 
 
    list-style: none; 
 
} 
 
ul { 
 
padding: 0; 
 
} 
 
span.target-click { 
 
    color: #444; 
 
    border: 1px solid #ddd; 
 
    background-color: #f7f7f7; 
 
    height: 44px; 
 
    display: inline-block; 
 
    line-height: 44px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
}

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
 

 
    <nav> 
 
    <ul> 
 
    <li> 
 
    <span class="target-click">Hotel Selection</span> 
 
    <ul class="hidden-drop"> 
 
     <li><a href="#ecoHotel">EcoName</a></li> 
 
     <li><a href="#luxuryHotel">LuxuryName</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav> 
 
           
 
<div id="ecoHotel" class="page">Eco Hotel Section</div> 
 
<div id="luxuryHotel" class="page">Luxury Hotel Section</div>

Answer 2

$('html,body').animate({ 
    scrollTop: $('#target').offset().top 
}, 1000); 

Dies umzusetzen versuchen scrollt reibungslos an das DOM-Element mit dem Ziel id

1000 ist in Millisekunden.