Question

好的，我正在尝试获取一个页面（两个div），主要是一个启动画面，当您点击“输入网站”时并且它将平滑地向下滚动到主要网站＆＃39;，然而它跳转到它，而不是平滑滚动到元素。

如果没有这种跳跃效果，我怎样才能顺利滚动到该元素？

这是我的一个片段：

＆＃13;

splash = document.getElementById('intro');
content = document.getElementById('content');

function enterSite (){
	content.scrollIntoView({behaviour: "smooth"});
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

如果您不想直接跳跃，则应以某种方式为滚动设置动画。
在jQuery的帮助下很简单：

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

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

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

Answer 2

您的<Schedule name="NE3S"> <Item scheduleId="1" startDate="2013-01-01" stopDate="2037-12-31"> <measurements> <measurement>PGW0001</measurement> </measurements> <measPeriods> <period day="0" duration="0" hour="0" interval="15" minutes="0" /> </measPeriods> </Item> <Item scheduleId="2" startDate="2013-01-01" stopDate="2037-12-31"> <measurements> <measurement>PGD0001</measurement> </measurements> <measPeriods> <period day="0" duration="0" hour="0" interval="60" minutes="0" /> </measPeriods> </Item> <Item scheduleId="3" startDate="2013-01-01" stopDate="2037-12-31"> <measurements> <measurement>PGW0002</measurement> </measurements> <measPeriods> <period day="0" duration="0" hour="0" interval="60" minutes="0" /> </measPeriods> </Item> </Schedule>应该有效，但是，我认为“行为”的拼写是行为。

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

View stackoverflow answer

Answer 3

假设你也有JQuery。

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

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

让我知道它是否有效

Answer 4

您可以对for和window.scrollTo使用setTimeout循环，以使用纯Javascript平滑滚动。

function scrollToSmoothly(pos, time){
/*Time is only applicable for scrolling upwards*/
/*Code written by hev1*/
/*pos is the y-position to scroll to (in pixels)*/
     if(isNaN(pos)){
      throw "Position must be a number";
     }
     if(pos<0){
     throw "Position can not be negative";
     }
    var currentPos = window.scrollY||window.screenTop;
    if(currentPos<pos){
    var t = 10;
       for(let i = currentPos; i <= pos; i+=10){
       t+=10;
        setTimeout(function(){
        window.scrollTo(0, i);
        }, t/2);
      }
    } else {
    time = time || 2;
       var i = currentPos;
       var x;
      x = setInterval(function(){
         window.scrollTo(0, i);
         i -= 10;
         if(i<=pos){
          clearInterval(x);
         }
     }, time);
      }
}

演示：

<button onClick="scrollToDiv()">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element<p/>
<button onClick="scrollToSmoothly(Number(0))">Scroll back to top</button>
</div>
<button onClick="scrollToSmoothly(Number(500), Number(10))">
Scroll To y-position 500
</button>
<script>
   function scrollToSmoothly(pos, time){
/*Time is only applicable for scrolling upwards*/
/*Code written by hev1*/
/*pos is the y-position to scroll to (in pixels)*/
     if(isNaN(pos)){
      throw "Position must be a number";
     }
     if(pos<0){
     throw "Position can not be negative";
     }
    var currentPos = window.scrollY||window.screenTop;
    if(currentPos<pos){
    var t = 10;
       for(let i = currentPos; i <= pos; i+=10){
       t+=10;
        setTimeout(function(){
      	window.scrollTo(0, i);
        }, t/2);
      }
    } else {
    time = time || 2;
       var i = currentPos;
       var x;
      x = setInterval(function(){
         window.scrollTo(0, i);
         i -= 10;
         if(i<=pos){
          clearInterval(x);
         }
     }, time);
      }
}
function scrollToDiv(){
  var elem = document.querySelector("div");
  scrollToSmoothly(elem.offsetTop);
}
</script>

使用scrollIntoView平滑滚动效果 - Javascript

4 个答案: