javascript - 平滑滚动到顶部

Question

我已经搜索了几个小时，但我没有解决方案。我想要平滑滚动到页面顶部。我已经可以平滑滚动以将页面中的锚点与.js附加到我的站点的文件分开，但我不能在顶部使用锚点，因为我使用的是来自免费托管站点的模板，该模板带有不允许的内置页面构建工具我在身体区域上方进行编辑。

这是我平滑滚动的地方。我一直在尝试设置“没有 jquery 插件的平滑滚动到元素”，但经过无数次尝试，我不知道如何安排它。我也用过window.scrollTo(0, 0);，但它会立即滚动。谢谢！

另外： http: //jsfiddle.net/WFd3V/ - 代码可能是标签class="smoothScroll"，因为我的其他元素使用它，但我不知道如何将它与href="javascript:window.scrollTo(0,0);", 或任何其他将页面带到没有锚的顶部。

score 145 · Accepted Answer

我认为最简单的解决方案是：

window.scrollTo({top: 0, behavior: 'smooth'});

如果您想要即时滚动，那么只需使用：

window.scrollTo({top: 0});

可以用作函数：

// Scroll To Top

function scrollToTop() {

window.scrollTo({top: 0, behavior: 'smooth'});

}

或作为 onclick 处理程序：

<button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button>

score 82 · Accepted Answer

这是我用 ES6 实现的建议

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
scrollToTop();

提示：对于较慢的滚动动作，增加硬编码数字8。数字越大 - 滚动越平滑/越慢。

score 15 · Accepted Answer

window.scroll({top: 0, behavior: "smooth"})

只需使用这段代码，它就会完美运行，您可以将其包装到方法或事件中。

score 9 · Accepted Answer

仅纯 Javascript

var t1 = 0;
window.onscroll = scroll1;

function scroll1() {
  var toTop = document.getElementById('toTop');
  window.scrollY > 0 ? toTop.style.display = 'Block' : toTop.style.display = 'none';
}

function abcd() {
  var y1 = window.scrollY;
  y1 = y1 - 1000;
  window.scrollTo(0, y1);
  if (y1 > 0) {
    t1 = setTimeout("abcd()", 100);
  } else {
    clearTimeout(t1);
  }
}

#toTop {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 48px;
}

#toTop {
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  opacity: 0.5;
  display: none;
  cursor: pointer;
}

#toTop:hover {
  opacity: 1;
}

<p>your text here</p>
<img id="toTop" src="http://via.placeholder.com/50x50" onclick="abcd()" title="Go To Top">

score 6 · Accepted Answer

您应该开始使用 jQuery 或其他一些 js 库。它比 js 简单得多，您可以将其用作大多数 js 的简写，而不是实际上冗长的、抽出的 js。

简单地说<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>（或任何最新的谷歌 CDN 是https://developers.google.com/speed/libraries/devguide#jquery）在你的<head>.

然后，在您的event代码中（如果您使用 jQuery 会更容易：$.click()对于按钮、$.change()复选框、选择、单选...），将第二个链接中的代码看起来更像

$('#theIDofTheButtonThatTriggersThisAnimation').click(function(){
    $('#theIDofTheElementYouWantToSmoothlyScroll').animate({
        scrollTop: 0
    }, 2000);
});

但是，如果您正在尝试制作动画，我建议您查看一些基本的 css 属性，例如position:absolute并position:relative避免发疯。

我仍然不太确定您的代码中发生了什么，因为相对于现在使用 css 和 jQuery 完成的事情，它是非常不标准的。我会把它分解成一些简单的东西来学习一般概念。

对于您的示例，您应该以我的动画示例为基础，我是如何学习的：https ://stackoverflow.com/a/12906254/1382306

我认为您正在尝试根据$.click(). 在我的回答中，它左右滑动。您可以使用 csstop属性而不是left.

一旦弄清楚如何上下移动整个内容div，您就可以制作一个relative容器来保存所有内容，并通过设置它们的 s 来循环absolute div操作所有内容。这是一个快速入门：http ://css-tricks.com/absolute-positioning-inside-relative-positioning/divtopabsoluterelative

我所有的动画都有relative容器和absolute内容。我就是这样制作了一个自定义的 gridview 插件，它可以立即压缩整个数据库。

div此外，在动画方面确实没有过度使用s。试图让 1div做所有事情是一场噩梦。

试试看你能不能把我的小提琴重新格式化成垂直滑出。完成后，absolute稍作relative研究。如果您还有其他问题，请再问一个问题。

将您的想法转变为这些理念，您将开始熟悉这种类型的编码。

score 6 · Accepted Answer

嗯评论功能对我关闭，

尝试这个

$(document).ready(function(){
    $("#top").hide();
    $(function toTop() {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#top').fadeIn();
            } else {
                $('#top').fadeOut();
            }
        });

        $('#top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });         
            
            
    
    });

#top {
  float:right;
  width:39px;
  margin-top:-35px; 
}
#top {
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    opacity: 0.5;
    display:none;
    cursor: pointer;
}
#top:hover {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="top" onclick="toTop()"><img src="to_top.png" alt="no pic "/> klick to top</div>

score 5 · Accepted Answer

自从被问到这个问题已经过去了一段时间。

现在不仅可以为 window.scroll 函数指定数字，还可以传递一个具有三个属性的对象：top、left 和 behavior。因此，如果我们想使用原生 JavaScript 平滑向上滚动，我们现在可以执行以下操作：

let button = document.querySelector('button-id');
let options = {top: 0, left: 0, behavior: 'smooth'}; // left and top are coordinates
button.addEventListener('click', () => { window.scroll(options) });

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

score 4 · Accepted Answer

你可以简单地使用

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("gotoTop").style.display = "block";
    } else {
        document.getElementById("gotoTop").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#gotoTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#gotoTop:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="gotoTop" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

score 3 · Accepted Answer

使用 jQuery 的优雅简单的解决方案。

<script>
    function call() {
        var body = $("html, body");
        body.stop().animate({scrollTop:0}, 500, 'swing', function() {
        });
    }
</script>

并在您的 html 中： <div onclick="call()"><img src="../img/arrow-up@2x.png"></div>

score 2 · Accepted Answer

我刚刚定制了 BootPc Deutschland 的答案

你可以简单地使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('body,html').animate({
            scrollTop: 0
        }, 800);
    $('#btn-go-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
}); 
</script>

这将帮助您顺利滚动到页面顶部。

和造型

#btn-go-to-top {
opacity: .5;
width:4%;
height:8%;
display: none;
position: fixed;
bottom: 5%;
right: 3%;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 10px;
 border-radius: 50%;
}

#btn-go-to-top:hover {
opacity: 1;
}
.top {
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

这种样式使按钮到达页面的右下角。

在您的页面中，您可以像这样添加按钮以转到顶部

<div id="btn-go-to-top" class="text-center top">
<img src="uploads/Arrow.png" style="margin: 7px;" width="50%" height="50%">
</div>

希望这对你有帮助。如果你有任何疑问，你可以随时问我

score 0 · Accepted Answer

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

要在准确的时间内滚动到某个位置，window.requestAnimationFrame可以使用，每次计算出合适的当前位置。不支持setTimeout时可以使用类似的效果。requestAnimationFrame要滚动到页面顶部，可以使用 position as 调用以下函数0。

/*
   @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);
        }
    });
}

window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
  scrollToSmoothly(0, 700);
});

<button style="margin: 2000px 0;">Smooth scroll to top</button>

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

smoothScroll({yPos: 'start', duration: 700});
// or
smoothScroll({yPos: 0, duration: 700});

window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
  smoothScroll({yPos: 'start', 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 style="margin: 2000px 0;">Smooth scroll to top</button>

或者，您可以将选项对象传递给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' 
});

window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
});

<button style="margin: 2000px 0;">Smooth scroll to top</button>

现代浏览器支持scroll-behaviorCSS 属性，该属性可用于使文档中的滚动平滑（无需 JavaScript）。

window.scrollTo(0, 2000);
document.querySelector('button').addEventListener('click', function(e){
  window.scrollTo(0, 0);
});

html, body {
  scroll-behavior: smooth;
}

<button style="margin: 2000px 0;">Scroll to top (JavaScript)</button> 
<a href="#">Link to smoothly scroll to top of page (no JavaScript)</a>

score 0 · Accepted Answer

0

也用于以下：

  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;

于 2019-07-26T05:57:25.473 回答

score 0 · Accepted Answer

想出了这个解决方案：

function scrollToTop() {
let currentOffset = window.pageYOffset;
const arr = [];

for (let i = 100; i >= 0; i--) {
    arr.push(new Promise(res => {
            setTimeout(() => {
                    res(currentOffset * (i / 100));
                },
                2 * (100 - i))
        })
    );
}

arr.reduce((acc, curr, index, arr) => {
    return acc.then((res) => {
        if (typeof res === 'number')
            window.scrollTo(0, res)
        return curr
    })
}, Promise.resolve(currentOffset)).then(() => {
    window.scrollTo(0, 0)
})}

score 0 · Accepted Answer

theMaxx 答案在 nuxt/vue 中有效，平滑滚动是默认行为

<button @click=scrollToTop()>跳转到页面顶部

  methods: {
    scrollToTop() {
      window.scrollTo({ top: 0 });
    }
  }

javascript - 平滑滚动到顶部

14 回答 14

Related

Reference