您可以将焦点设置为元素。它比scrollIntoView工作得更好

node。setAttribute(“tabindex”、“- 1”)

node.focus ()

node . removeAttribute(“tabindex”)

我们可以通过3种方法来实现:

注意:

"automatic-scroll" =>特定元素

" scrolble -div" =>可滚动区域div

方法1:

document.querySelector('.automatic-scroll').scrollIntoView({
     behavior: 'smooth'
});

方法2:

location.href = "#automatic-scroll";

方法3:

$('#scrollable-div').animate({
   scrollTop: $('#automatic-scroll').offset().top - $('#scrollable-div').offset().top + 
   $('#scrollable-div').scrollTop()
})

重要注意:如果可滚动区域高度为“auto”，方法1和方法2将非常有用。方法3是有用的，如果我们使用滚动区域的高度，如“calc(100vh - 200px)”。

您可以将焦点设置为元素。它比scrollIntoView工作得更好

node。setAttribute(“tabindex”、“- 1”)

node.focus ()

node . removeAttribute(“tabindex”)

试试这个:

var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible'; 
divFirst.style.display = 'block';  
divFirst.tabIndex = "-1";  
divFirst.focus();

如@:

http://jsfiddle.net/Vgrey/

由于行为“平滑”不工作在Safari, Safari ios，浏览器。我通常使用requestAnimationFrame写一个简单的函数

(function(){
    var start;
    var startPos = 0;

    //Navigation scroll page to element
    function scrollTo(timestamp, targetTop){
      if(!start) start = timestamp
      var runtime = timestamp - start
      var progress = Math.min(runtime / 700, 1)

      window.scroll(0, startPos + (targetTop * progress) )

      if(progress >= 1){
        return;
      }else {
        requestAnimationFrame(function(timestamp){
            scrollTo(timestamp, targetTop)
        })
      }
   };

  navElement.addEventListener('click', function(e){

    var target = e.target  //or this 
    var targetTop = _(target).getBoundingClientRect().top
    startPos = window.scrollY

    requestAnimationFrame(function(timestamp){
        scrollTo(timestamp, targetTop)
    })
  }

})();

你可以使用一个锚来“聚焦”div。例如:

<div id="myDiv"></div>

然后使用下面的javascript:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";