Scroll to the top of the page using JavaScript?

后端未结

关注

 30  1031

How do I scroll to the top of the page using JavaScript? The scrollbar instantly jumping to the top of the page is desirable too as I\'m not looking to achieve smooth scroll

相关标签:

30条回答

情书的邮戳

2020-11-22 03:33
If you do want smooth scrolling, try something like this:
```
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
```
That will take any <a> tag whose href="#top" and make it smooth scroll to the top.
0 讨论(0)
发布评论:

提交评论
- 加载中...
粉色の甜心

2020-11-22 03:33
The old #top can do the trick
```
document.location.href = "#top";
```
Works fine in FF, IE and Chrome
0 讨论(0)
发布评论:

提交评论
- 加载中...
遇见更好的自我

2020-11-22 03:34
Motivation

This simple solution works natively and implements a smooth scroll to any position.

It avoids using anchor links (those with #) that, in my opinion, are useful if you want to link to a section, but are not so comfortable in some situations, specially when pointing to top which could lead to two different URLs pointing to the same location (http://www.example.org and http://www.example.org/#).

Solution

Put an id to the tag you want to scroll to, for example your first section, which answers this question, but the id could be placed everywhere in the page.
```
<body>
  <section id="top">
    
  </section>
  <div id="another"></div>
```
Then as a button you can use a link, just edit the onclick attribute with a code like this.
```
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
```
Where the argument of document.getElementById is the id of the tag you want to scroll to after click.
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧巷少年郎

2020-11-22 03:35

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Edit:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Another way scroll with top and left margin:

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

0 讨论(0)

时光说笑

2020-11-22 03:36
If you want to do smooth scrolling, please try this:
```
$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});
```
Another solution is JavaScript window.scrollTo method :
```
 window.scrollTo(x-value, y-value);
```
Parameters :
- x-value is the pixel along the horizontal axis.
- y-value is the pixel along the vertical axis.
0 讨论(0)
发布评论:

提交评论
- 加载中...

佛祖请我去吃肉

2020-11-22 03:36

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}

<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

0 讨论(0)

1 2 3 4 5 下一页

Scroll to the top of the page using JavaScript?

Motivation

Solution