0

好的，我正在尝试获取一个页面（两个 div），主要是一个启动屏幕，当您单击“进入站点”时，它会平滑地向下滚动到“主站点”，但是它会跳转到它，而不是平滑滚动到元素。

如果没有这种跳跃效果，我怎样才能让它平滑地滚动到那个元素？

这是我的一个片段：

splash = document.getElementById('intro');
content = document.getElementById('content');

function enterSite() {
  content.scrollIntoView({
    behaviour: "smooth"
  });
}
body {
  font-family: 'Archivo Narrow', sans-serif;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

html,
body {
  overflow: hidden;
}

main {
  width: 100%;
  height: 100%;
  position: relative;
}

#intro {
  background-image: url(https://i.imgsafe.org/51d0cf26df.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  text-align: center;
  height: 100%;
}

#splash {
  margin: auto;
  width: 40%;
  background-color: rgba(56, 56, 56, 0.4);
  border-radius: 50px 50px;
}

#splash-p {
  width: 70%;
  font-size: 1.2em;
  line-height: 1.5em;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  color: #fff;
}

.btn {
  width: 35%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Main Content Page */

article {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}
<div id="intro">
  <div id="splash">
    <p id="splash-p">Just a load of text repeated</p>
    <input
      type="image"
      src="Images/Button.png"
      class="btn"
      onclick="enterSite()"
    />
  </div>
</div>
<article id="content">Just a load of text repeated</article>

如果单击按钮，它将跳转到下一个 div，但我需要它平滑滚动而不是跳转到下一个 div，使用纯 javascript，我看过的其他任何地方似乎都有插件或使用 jquery。

4

4 回答 4

2

如果你不想直接跳跃，你应该以某种方式为滚动设置动画。
在jQuery的帮助下很容易：

$("html, body").animate({ scrollTop: $([ELEMENT]).position().top }, 1000);

看看这个小提琴：https ://jsfiddle.net/8501ckvn/

jQuery 解决了很多跨浏览器问题，但如果您正在寻找纯 JavaScript解决方案，Stackoverflow 上已经有很多答案，即查看Smooth scroll anchor links WITHOUT jQuery。

于 2016-10-05T15:55:04.007 回答
2

你content.scrollIntoView({behaviour: "smooth"});应该工作，但是，我认为 'behaviour' 拼写为behavior。

我确实开发了一种使用 TypeScript 平滑滚动的方法，但是您应该能够很容易地转换为 JS：

查看stackoverflow答案

于 2019-04-08T11:21:18.387 回答
1

有关平滑滚动的更全面的方法列表，请参阅我的答案here。

要在准确的时间内滚动到某个位置，window.requestAnimationFrame可以使用，每次计算出合适的当前位置。不支持setTimeout时可以使用类似的效果。requestAnimationFrame

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

演示：

function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

document.getElementById("toElement").addEventListener('click', function(e) {
  var elem = document.querySelector("div");
  scrollToSmoothly(elem.offsetTop);
});
document.getElementById("toTop").addEventListener('click', function(e){
  scrollToSmoothly(0, 700);
});
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
  <button id="toTop">Scroll back to top</button>
</div>

对于更复杂的情况，可以使用SmoothScroll.js 库，它可以处理垂直和水平平滑滚动、在其他容器元素内滚动、不同的缓动行为、从当前位置相对滚动等等。

document.getElementById("toElement").addEventListener('click', function(e) {
  smoothScroll({toElement: document.querySelector('div'), duration: 500});
});
document.getElementById("toTop").addEventListener('click', function(e){
  smoothScroll({yPos: 0, duration: 700});
});
<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
  <button id="toTop">Scroll back to top</button>
</div>

或者，您可以传递一个选项对象，window.scroll该对象滚动到特定的 x 和 y 位置，并window.scrollBy从当前位置滚动一定量：

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

演示：

<button onClick="scrollToDiv()">Scroll To Element</button>
<div style="margin: 500px 0px;">Div</div>
<script>
function scrollToDiv(){
var elem = document.querySelector("div");
window.scroll({
      top: elem.offsetTop, 
      left: 0, 
      behavior: 'smooth' 
});
}
</script>

现代浏览器支持scroll-behaviorCSS 属性，该属性可用于平滑文档滚动（无需 JavaScript）。锚标签可以通过给锚标签 ahref加上要滚动#到id的元素来使用）。您还可以为scroll-behavior特定容器设置属性，如 adiv以使其内容平滑滚动。

演示：

html, body{
  scroll-behavior: smooth;
}
<a href="#elem">Scroll To Element</a>
<div id="elem" style="margin: 500px 0px;">Div</div>

于 2018-08-04T17:42:21.187 回答
0

假设您也有 JQuery。

您可以使用以下 JQuery 代码来获得平滑的滚动效果

function enterSite(){
    $('html, body').stop().animate({
        scrollTop: $('#content').offset().top
    }, 1500);
});

让我知道它是否有效

于 2016-10-05T15:52:21.060 回答