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

New issue

Open

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

Labels

haizhilin2013

Collaborator

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

haizhilin2013

added

on May 1, 2019

linghucq1

window.location.href += '#'

qqdnnd

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

myprelude

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

Konata9

总结了前面几位老哥的答案，另外加了一个 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

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

NeverLoseYourWay

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

NeverLoseYourWay

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

15190408121

前几天写的跳转页面后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

方法 1⃣️

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

方法 2⃣️

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

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

关于 document.documentElement 和 document.body

blueRoach

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

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

Alex-Li2018

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);
        }    
    });

带动画的写法

smile-2008

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

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

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

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

378406712

document.documentElement.scrollTop;

HNHED

document.documentElement.scrollTop

amikly

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

总结：

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

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

xiaoqiangz

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

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

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

WangXi01

使用#
document.documentElement.scrollTop = 0

HoseaGuo

还可以，利用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

在 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

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

panpanxuebing

document.documentElement.scrollTop = 0
// 或
scrollTo({
 top: 0,
 behavior: 'smooth'
})

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

a标签的锚点

url 后增加

js设置 scrollTop = 0

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Participants

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

Description

Activity

linghucq1 commented on May 8, 2019

qqdnnd commented on May 17, 2019

myprelude commented on Jun 13, 2019

Konata9 commented on Jul 10, 2019

Vi-jay commented on Jul 26, 2019

NeverLoseYourWay commented on Aug 31, 2019

NeverLoseYourWay commented on Aug 31, 2019

15190408121 commented on Sep 1, 2019

censek commented on Oct 17, 2019

blueRoach commented on Jun 2, 2020

giggleCYT commented on Jun 20, 2020

Alex-Li2018 commented on Aug 5, 2020

smile-2008 commented on Sep 14, 2020

378406712 commented on May 6, 2021

HNHED commented on Sep 3, 2021

amikly commented on Nov 3, 2021

a标签的锚点

url 后增加

js设置 scrollTop = 0

yxllovewq commented on Mar 9, 2022

xiaoqiangz commented on May 25, 2022

WangXi01 commented on Jul 13, 2022

HoseaGuo commented on Aug 11, 2022

never123450 commented on Sep 1, 2023

lili-0923 commented on Feb 29, 2024

panpanxuebing commented on Dec 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Participants

Issue actions

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