时间戳

首页 > 解决方案 > Javascript 表单不会在下一步滚动到顶部

javascript - Javascript 表单不会在下一步滚动到顶部

问题描述

我正在为用 JS 编写的多步表单而苦苦挣扎。我还在学习很多东西，我在 W3SCHOOL 上发现了一个很好的多步表单示例。当您在表单的第一步和第二步中添加更多“项目”并在表单的第一步中单击下一步按钮时，您最终会进入表单第二步的中间......

这是W3 教程和代码。

我应该写什么以及在该代码中的哪个位置使其始终位于“页面”的顶部？提前谢谢你们！

标签： javascripthtmlcss

解决方案

在这里，我给出了两个滚动到页面顶部的示例。

  1. 没有动画也没有任何脚本 Scroll Top

    注意：在这里，如果您将 # 替换为某些特定部分或 div Id，例如 #form-section 等，那么当您单击此链接时，它将滚动到该部分。

  2. 带动画 - 使用脚本和 CSS（建议）

    注意：此示例您可以在任何地方使用，甚至可以用于网站，也可以滚动到页面顶部

HTML

<a href="javascript:void(0);" class="scrollToTop">
    <span class="fa fa-arrow-up"></span> <!-- Here you can use any arrow icon or plain as well based on that make changes in CSS. Here for sample I've given font awesome icon -->
</a>

CSS

    。滚动到顶部 {
        z指数：999；
        位置：固定；
        显示：无；
        背景：#000；
        边框半径：4px；
        高度：45px；
        行高：45px；
        宽度：45px；
        文本对齐：居中；
        底部：30px；
        左：10px；
        颜色：#fff;
        字体大小：18px；
    }

jQuery

<pre>
$(window).scroll(function(){ 
    if($(this).scrollTop() > 100){
        $('.scrollToTop').fadeIn();
    }else{
        $('.scrollToTop').fadeOut();
    }
});
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});
</pre>

推荐阅读