时间戳

首页 > 解决方案 > 通过单击任何点上的 div 滚动到特定的 div

javascript - 通过单击任何点上的 div 滚动到特定的 div

问题描述

我知道这个问题已经得到解答，但我的问题的情况完全不同，所以我会尝试解释一下。如果有人想要更多解释，我很乐意给出。

我有一个由 8 个框组成的过滤器栏。 

 <div class="filter-box  filter-box--green px-2 pt-3 pb-4" data-box-id="web-dev">
     <img width="60" height="60" src="{!! asset('images/Service-page/Web Development-hover.svg') !!}" alt="Web Dev" />
         <div class="title text-center mt-2 pb-4">
                            Web<br />Development
         </div>

         <div class="arrow">
             <img src="{!! asset('images/Service-page/Green.svg') !!}">
         </div>
  </div>

当我单击该框时，它会根据data-box-id

下面是滚动到特定 div 的 JavaScript 代码。

    <script type="text/javascript">
    $(document).ready(function() {
        $('.filter-box').on('click', function(e) {
            // console.log(window.scroll)
            var boxId = $(this).attr('data-box-id');

            $('html, body').animate({
                scrollTop: $("#" + boxId).offset().top
            }, 'slow');
        });
    })
</script>

在这里我使用了offset. 问题是有时，光标不在目标位置。我想要实现的是，当我单击过滤器框上的任意位置时，它应该滚动并且我的光标位置应该在预期的 div 上。

标签： javascriptjqueryhtmlcss

解决方案

使用 Jquery .animate 平滑滚动到所需元素，请参见示例。

$( "#notelement" ).click(function() {
  $('html, body').animate({
      scrollTop: ($('#element').offset().top)
  },500);
});
#notelement{
  margin-bottom:800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notelement">Other element</div>
<div id="element">Scroll to element</div>

推荐阅读