前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js滚动到页面顶部

js滚动到页面顶部

原创
作者头像
IT工作者
修改2022-04-07 09:43:59
13.3K0
修改2022-04-07 09:43:59
举报
文章被收录于专栏:程序技术知识

原生js的scrollTo来实现滚动到页面顶部。

方法一:

代码语言:javascript
复制
// 页面滚动到顶部
// 方法一
document.body.scrollTop=document.documentElement.scrollTop=0
// 方法二
document.body.scrollIntoView()

// scrollIntoView 是元素也有的方法, 可以用在页面元素上,例如
document.getElementById('id').scrollIntoView()

方法二:

代码语言:javascript
复制
//回到顶部
const scrollToTop = () => {undefined
const fromTopDistance = document.documentElement.scrollTop || document.body.scrollTop;
if (fromTopDistance > 0) {undefined
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, fromTopDistance - fromTopDistance/ 8);
}
}
//执行此方法
scrollToTop()

方法三:

代码语言:javascript
复制
$(".scroll").click(function(event)
{
  //prevent the default action for the click event
  event.preventDefault();
  //get the full url - like mysitecom/index.htm#home
  var full_url = this.href;
  //split the url by # and get the anchor target 
  //name - home in mysitecom/index.htm#home
  var parts = full_url.split("#");
  var trgt = parts[1];
  //get the top offset of the target anchor
  var target_offset = $("#"+trgt).offset();
  var target_top = target_offset.top;
  //goto that anchor by setting the body scroll top to anchor top
  $('html, body').animate({scrollTop:target_top}, 500);
});​

js平滑滚动到顶部,底部,指定地方 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置 滚动到顶部:

代码语言:javascript
复制
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

滚动到指定位置:

代码语言:javascript
复制
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

如果不需要使用动画来滚动,则不需要使用到任何插件。

我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。

代码语言:javascript
复制
element.scrollTo(x-coord, y-coord);
//或者
element.scrollTo(options)

参数

  • x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
  • y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。

或者

  • options 是一个ScrollToOptions对象。

代码语言:javascript
复制
element.scrollTo(0, 1000);
//ScrollToOptions
element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

浏览器兼容性

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法一:
  • 方法二:
  • 方法三:
    • 参数
        • 浏览器兼容性
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档