[js] 第16天返回到顶部的方法有哪些？把其中一个方法出来 #52

haizhilin2013 · 2019-05-01T20:54:48Z

第16天返回到顶部的方法有哪些？把其中一个方法出来

linghucq1 · 2019-05-08T09:59:44Z

window.location.href += '#'

qqdnnd · 2019-05-17T03:35:59Z

window.scrollTo(0,0); //ie不支持，但好用
document.documentElement.scrollTop = 0;
location.href += '#';

myprelude · 2019-06-13T08:02:33Z

document.documentElement.scrollTop = 0;
location.href += '#';

Konata9 · 2019-07-10T08:43:47Z

总结了前面几位老哥的答案，另外加了一个 a 标签的锚点方法。

利用 a 标签的锚点。在顶部放一个 a 标签 <a name="top">顶部</a>，在需要回到顶部的位置放置一个 a 标签，地址为 top。 <a href="#top">回到顶部</a>。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。
利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。
利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。

Vi-jay · 2019-07-26T08:42:57Z

 function backToTop() {
          if (parent.scrollTop <= 0) return;
          parent.scrollTop -= 30;
          requestAnimationFrame(backToTop)
        }

NeverLoseYourWay · 2019-08-31T07:44:09Z

1.通过锚链接回到顶部,需要将body加入一个名为top的标记:
回到顶部
2.通过JavaScript的scroll回到顶部,控制水平和垂直方向:
JavaScript回到顶部<s/a>

NeverLoseYourWay · 2019-08-31T07:45:03Z

<a href="#top" target="_self">回到顶部</a> <a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>

15190408121 · 2019-09-01T09:35:20Z

前几天写的跳转页面后jquery的锚点方法

function getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  var r = window.location.search.substr(1).match(reg);  //匹配目标参数
  if (r != null) return unescape(r[2]); return null; //返回参数值
}
var abouts = getUrlParam("about")
if (abouts == "about") {
  $("html,body").animate({scrollTop:$("#about").offset().top},1000);
}

检测到参数about之后直接出发参数定位到锚点

censek · 2019-10-17T05:38:07Z

方法 1⃣️

<a href="#">返回顶部</a>

方法 2⃣️

 <button @click="top()">返回顶部</button>

methods: {
    top() {
     document.documentElement.scrollTop = 0
    }
}

关于 document.documentElement 和 document.body

blueRoach · 2020-06-02T07:09:51Z

a标签设置属性href="#top"
a标签的锚点，需要再顶部标签设置id

js
window.scrollTo(0, 0)
location.href += '#'
document.documentElement。scrollTop = 0

      var st = document.documentElement.scrollTop, speed = st / 10;
      var funScroll = function () {
        st -= speed;
        if (st <= 0) { 
          st = 0; 
        }
        window.scrollTo(0, st);
        if (st > 0) {
          setTimeout(funScroll, 10); 
        }
      };
      funScroll()

giggleCYT · 2020-06-20T09:25:25Z

<button><a href="#">点我回顶部</a></button>

Alex-Li2018 · 2020-08-05T06:56:19Z

cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });

带动画的写法

MrZ2019 · 2020-09-14T01:50:49Z

总结了前面几位老哥的答案，另外加了一个 a 标签的锚点方法。

利用 a 标签的锚点。在顶部放一个 a 标签顶部，在需要回到顶部的位置放置一个 a 标签，地址为 top。回到顶部。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。

利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。

利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。

378406712 · 2021-05-06T04:24:56Z

document.documentElement.scrollTop;

HNHED · 2021-09-03T09:40:40Z

document.documentElement.scrollTop

amikly · 2021-11-03T16:29:19Z

a标签的锚点

<!--  要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的 -->
<a name="top">顶部</a>
<a href="#top" target="_self">回到顶部</a>

url 后增加

在 url 后增加 # 不会让页面刷新，并且可以回到顶部

<!--  可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应 -->
<a href="#">返回顶部</a>

js设置 scrollTop = 0

<!--  一般设置在最外层即 document.documentElement.scrollTop = 0 就可以返回顶部 -->
<button @click="top()">返回顶部</button>
<script>
    function top(){
        document.documentElement.scrollTop = 0;
    }
</script>

yxllovewq · 2022-03-09T03:33:39Z

总结：

document.documentElement.scrollTop = 0
锚点法，在顶部加个标签
url末尾加#，hash值可以为空
加#的方法可以是：
<a href='#>top
上面说到的location.href+=#，既然只能用一次为什么还这么写？下面这个写法可以一直使用。

function top() {
  location.href = /#$/.test(location.href) ? location.href : location.href + '#';
}

xiaoqiangz · 2022-05-25T03:47:27Z

利用 a 标签的锚点。在顶部放一个 a 标签顶部，在需要回到顶部的位置放置一个 a 标签，地址为 top。回到顶部。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。（学习了）

利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。(学习了)

利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。

WangXi01 · 2022-07-13T07:25:18Z

使用#
document.documentElement.scrollTop = 0

HoseaGuo · 2022-08-11T08:46:48Z

还可以，利用input的focus触发描点定位，搭配label。

<body>
  <input type="radio" id="top-input" style="opacity: 0;position: absolute;z-index: -100;">
  <label for="top-input" style="position: fixed;right: 10px;bottom: 10px;">点击回到顶部</label>
  <div class="box" style="height: 3000px;"></div>
</body>

never123450 · 2023-09-01T01:56:15Z

在 JavaScript 中，有几种常见的方法可以实现返回到页面顶部的效果。以下是其中一种方法的示例代码：

function scrollToTop() {
  // 使用原生的 window.scrollTo() 方法将页面滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 可选，使用平滑滚动效果
  });
}

在上述代码中， scrollToTop() 函数使用 window.scrollTo() 方法将页面滚动到顶部。 top 参数设置为 0，表示滚动到页面的顶部位置。 behavior 参数设置为 'smooth' ，可选择使用平滑滚动效果。

要触发返回到顶部的操作，可以将该函数与一个按钮的点击事件关联，例如：
返回顶部
当用户点击按钮时，页面将滚动到顶部位置。

请注意，上述代码是一种简单的实现方式，具体的实现方法可能因项目需求和使用的框架而有所不同。

除了使用 JavaScript 中的 window.scrollTo() 方法外，还可以使用 HTML 和 CSS 来实现滚动到顶部的效果。以下是一种基本的实现方式：

<a href="#top" class="scroll-to-top">返回顶部</a>

<!-- 在页面其他位置的任意位置添加一个具有 id "top" 的元素 -->
<div id="top"></div>

<style>
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* 初始状态下隐藏 */
}

/* 当页面滚动到一定位置时显示 "返回顶部" 按钮 */
.scroll-to-top.show {
  display: block;
}
</style>

<script>
window.addEventListener('scroll', function() {
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  var scrollToTopButton = document.querySelector('.scroll-to-top');

  if (scrollPosition > 200) {
    scrollToTopButton.classList.add('show');
  } else {
    scrollToTopButton.classList.remove('show');
  }
});
</script>

在上述代码中，我们创建了一个带有 "返回顶部" 文本的链接，并将其放置在页面的底部右侧。然后，在页面的顶部位置添加了一个具有 id "top" 的元素。通过监听 scroll 事件，我们根据页面滚动的位置来切换 "返回顶部" 按钮的显示状态。

当页面滚动超过 200px 时，通过为按钮添加 .show 类来显示该按钮。点击该按钮将会自动滚动页面回到顶部。

请注意，这种方法仅使用了 HTML、CSS 和 JavaScript 的基本功能，没有使用特定的库或框架。具体的实现方式可能因项目需求和使用的技术栈而有所不同。

lili-0923 · 2024-02-29T06:26:25Z

锚点
document.documentElement.scrollTop = 0
返回顶部

haizhilin2013 added the js JavaScript label May 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[js] 第16天返回到顶部的方法有哪些？把其中一个方法出来 #52

[js] 第16天返回到顶部的方法有哪些？把其中一个方法出来 #52

haizhilin2013 commented May 1, 2019

linghucq1 commented May 8, 2019

qqdnnd commented May 17, 2019

myprelude commented Jun 13, 2019

Konata9 commented Jul 10, 2019

Vi-jay commented Jul 26, 2019 •

edited

NeverLoseYourWay commented Aug 31, 2019

NeverLoseYourWay commented Aug 31, 2019

15190408121 commented Sep 1, 2019

censek commented Oct 17, 2019 •

edited

blueRoach commented Jun 2, 2020

giggleCYT commented Jun 20, 2020

Alex-Li2018 commented Aug 5, 2020 •

edited

MrZ2019 commented Sep 14, 2020

378406712 commented May 6, 2021

HNHED commented Sep 3, 2021

amikly commented Nov 3, 2021

yxllovewq commented Mar 9, 2022 •

edited

xiaoqiangz commented May 25, 2022

WangXi01 commented Jul 13, 2022

HoseaGuo commented Aug 11, 2022

never123450 commented Sep 1, 2023

lili-0923 commented Feb 29, 2024

[js] 第16天 返回到顶部的方法有哪些？把其中一个方法出来 #52

[js] 第16天 返回到顶部的方法有哪些？把其中一个方法出来 #52

Comments

haizhilin2013 commented May 1, 2019

linghucq1 commented May 8, 2019

qqdnnd commented May 17, 2019

myprelude commented Jun 13, 2019

Konata9 commented Jul 10, 2019

Vi-jay commented Jul 26, 2019 • edited

NeverLoseYourWay commented Aug 31, 2019

NeverLoseYourWay commented Aug 31, 2019

15190408121 commented Sep 1, 2019

censek commented Oct 17, 2019 • edited

blueRoach commented Jun 2, 2020

giggleCYT commented Jun 20, 2020

Alex-Li2018 commented Aug 5, 2020 • edited

MrZ2019 commented Sep 14, 2020

378406712 commented May 6, 2021

HNHED commented Sep 3, 2021

amikly commented Nov 3, 2021

a标签的锚点

url 后增加

js设置 scrollTop = 0

yxllovewq commented Mar 9, 2022 • edited

xiaoqiangz commented May 25, 2022

WangXi01 commented Jul 13, 2022

HoseaGuo commented Aug 11, 2022

never123450 commented Sep 1, 2023

lili-0923 commented Feb 29, 2024

[js] 第16天返回到顶部的方法有哪些？把其中一个方法出来 #52

[js] 第16天返回到顶部的方法有哪些？把其中一个方法出来 #52

Vi-jay commented Jul 26, 2019 •

edited

censek commented Oct 17, 2019 •

edited

Alex-Li2018 commented Aug 5, 2020 •

edited

yxllovewq commented Mar 9, 2022 •

edited