Question

我试图在下拉选择更改时顺利滚动到锚点。从其他答案中尝试了很多代码，但由于我没有使用jquery的经验，因此无法使其工作。任何帮助，将不胜感激！ P.S：不介意链接选择器if语句

这是我的下拉列表

<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>

这是我试图在

中实现的jquery

<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

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

这将平滑滚动到具有目标id

的DOM元素

1000以毫秒为单位。

Answer 2

我为您提供了另一种解决方案。制作自己的dropdown，通过这种方式，您可以更轻松地实现自己想要的目标。我使用JQuery执行了所有下拉功能，您只需要设置下拉样式：

＆＃13;

$(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;
  });
  });

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

选择上的平滑滚动更改jquery

2 个答案: