Question

在包含数百个div元素的网页上，我需要能够点击任何人并让窗口滚动（向上或向下），以便div显示在视口的顶部。

换句话说：如何在单击元素时滚动窗口，以便此元素出现在视口顶部？

Element.scrollIntoView（）可以这样做（以及如何）？

Answer 1

这是你想要做的（点击按钮看）：

＆＃13;

$("button").click(function(){
  $(this).addClass("sivola");
});

＆＃13;

.sivola {
    position: fixed;
    top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<button>130 Martin Garrix si volaaa</button>

＆＃13;

Answer 2

为您的div分配类名。

一个（标准行为）将包含您的标准CSS属性，另一个（您将用于在视口顶部重新定位div的属性）将具有类似

的内容

className {
     position: fixed;
     top: 0;
     left: 0;
     ...
}

只要您想要触发fixed位置的任何事件，只需将此类名指定给div。

Answer 3

您必须将文档的顶部设置为0px并为其设置动画。

 $('scrollToTopBtn').click(function(e){
        $('html, body').animate({'scrollTop':'0'});
        e.preventDefault();
  });

Answer 4

找到解决方案！使用下面的JS来实现这一目标。请注意＆＃34; theOffset.top - 1＆＃34;是相对于视口顶部的位置和＆＃34; 100＆＃34;是单击ms后的延迟

jQuery(document).ready(function($) {
$(".elementclass").click(function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 1 });
            }, 100);
        });
  });

单击时将div移动到视口的最高点

4 个答案: