相关疑难解决方法(0)

我正在寻找一个简单的,跨浏览器的"滚动到顶部"动画,我可以应用于链接.我不想要一个JS库,如jQuery/Moo等.

// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);

对于那些应该在进入图书馆之前学会了JS 100%的人来说,我是一个完美的案例.:(

我一直在寻找一种方法来向下滚动时单击位于页面顶部的按钮仅使用CSS3.

所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

演示:http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

但是由于我只是希望浏览器向下滚动页面顶部的一个按钮向下滚动,所以它有点太高级了,所以我想知道:是否可以在没有输入按钮的情况下进行那些CSS滚动,只是带锚标记？

HTML看起来像这样: <a href="#" class="button">Learn more</a>

我已经有一些CSS需要在按钮点击时触发:

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}

我正在编写一个页面,我只想在没有任何插件或框架干扰的情况下使用UI的原始JavaScript代码.

而现在我正在努力寻找一种在没有jQuery的情况下顺利滚动页面的方法.

我试图在JavaScript中水平div移动动画200px.

下面的代码使它跳过像素,但有没有办法让它看起来不使用jQuery动画？

function () {
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = "200px";
}

我想平滑地滚动到一个元素而不使用jQuery - 只是纯粹的javascript.我希望通用功能能够向下滚动并平滑地向上滚动到文档中的特定位置.

我知道我可以在jQuery中使用以下内容:

$('html, body').animate({
     scrollTop: $('#myelementid').offset().top
}, 500);

我怎么用javascript做到这一点？

这就是我想要做的:

function scrollToHalf(){
  //what do I do?
}
function scrollToSection(){
 //What should I do here?
}

<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
    <br>
    <input type="button" onClick="scrollToSection()" value="Scroll To Section1">
    <section style="margin-top: 1000px;" id="section1">
      This is a section
</section>

在jquery我会这样做:

html, body{
  height: 3000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
<br>
<input type="button" onClick="scrollToSection()" value="Scroll To Section1">
<section style="margin-top: 1000px;" id="section1">
  This is …