Question

我有一个页面“ link.html”，该页面的锚点指向index.html页面<a href = "index.html?#myInnerLink"

我希望在另一个页面（index.html）上平滑滚动到div，该页面在jquery中具有“ myInnerLink”的ID。它工作正常，但问题是它是从底部滚动到顶部，而不是从顶部滚动到底部到特定的div

“ myInnerLink” div是“ myDiv” div内部的...谢谢

link.html

 <a id="mylink" href="index.html?#myInnerLink">Go To MY InnerLink</a>

index.html

<div id="myDiv" class="mydiv">
SomeText here...
<div id="myInnerLink">
 ScrollTo This Div...
</div>
</div>

jquery

 $(document).ready(function() {
        if (window.location.hash) {
            var hash = window.location.hash;

            $('#myDiv').animate({
                scrollTop :  $(hash).offset().top
            }, 500);
        };
    });

Answer 1

我目前在下面使用此脚本，该脚本经过修改，最初来自https://jsfiddle.net/s61x7c4e/

    function doScrolling(element, duration) {
  let bodyRect = document.body.getBoundingClientRect(),
      elementRect = element.getBoundingClientRect(),
      offset = ((elementRect.top - bodyRect.top) - 40);

  let startingY = window.pageYOffset,
      elementY = offset,
      targetY,
      diff,
      easeInOutCubic,
      start;

  duration = duration || 500;

  // if element is close to page's bottom then window will scroll only to some position above the element...
  targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY;
  diff = targetY - startingY;

  easeInOutCubic = function (t) {
      return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
  };

  if (!diff) return;

  // bootstrap our animation,
  //  it will get called right before next frame shall be rendered...
  window.requestAnimationFrame(function step(timestamp) {
      if (!start) start = timestamp;

      let time = timestamp - start, // elapsed milliseconds since start of scrolling...
          percent = Math.min(time / duration, 1); // get percent of completion in range [0, 1]

      // apply the easing, it can cause bad-looking
      //  slow frames in browser performance tool, so be careful...
      percent = easeInOutCubic(percent);

      window.scrollTo(0, startingY + diff * percent);

      // proceed with animation as long as we wanted it to.
      if (time < duration) {
          window.requestAnimationFrame(step)
      }
  })
}

document.getElementById('scrollMid').addEventListener('click', function(){
	var element = document.getElementById('middle');
	doScrolling(element, 1000);
});

使用jQuery将滚动到另一个页面上的ID Div

1 个答案: