淘宝首页返回顶部效果怎么做到的

发布网友发布时间：2022-04-26 16:02

共4个回答

懂视网时间：2022-05-18 01:58

淘宝首页的回到顶部按钮是这样的：下拉到一定距离后按钮才显示出来，鼠标放到按钮上时，按钮背景会变成灰色，并且图标变成了文字。点击按钮缓慢回到顶部

我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮，按钮表现发生变化，所以需要给按钮添加mouseover， mouseout事件。要侦听滚动条的变化，所以需要给window添加scroll事件，点击按钮回到顶部，按钮添加click事件。我们将事件处理程序封装成三个函数moveIn, moveOut, goTop;

下面先给出html/css代码
代码如下:

头部
主要内容，高度是2000px
底部
返回顶部

代码如下:
.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;}
.content { height: 2000px; border: 1px solid blue; }
#btn {
position:fixed;
bottom: 50px;
right: 0;
width: 54px;
height: 55px;
background: url(icons.png) no-repeat 0 -110px; } //背景图可随意找一张
font-size: 12px;
line-height: 55px;
text-align: center;
text-indent: -9999em;
cursor: pointer;
display: none;

下面是完整的js代码
代码如下:
window.addEventListener("load",function() {
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",moveIn, false);
btn.addEventListener("mouseout", moveOut, false);

function moveIn() {
btn.style.color = "#ffffff"; //修改的是内联样式，具有最高的优先级;
btn.style.textIndent = "0em";
btn.style.backgroundImage = "none";
btn.style.backgroundColor = "#FF4401";
}
function moveOut() {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "url(icons.png)";
}

function goTop(acceleration, time) { //修改参数可调整返回顶部的速度
acceleration = acceleration || 0.1;
time = time || 10;
var speed = 1 + acceleration;
function getScrollTop() { //取得滚动条的竖直距离
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value) { //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { //判断滚动条距离窗口顶部多远时显示出来，这里是100px
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop(Math.floor(getScrollTop() / speed)); //这行代码是关键，取得滚动条竖直距离，除以speed后再给滚动条设置竖直距离
if (getScrollTop() == 0)
clearInterval(timer);
}, time);
};
}
goTop(0.2, 8);
}, false);

当然，还有其他的实现方法，下面给出其他方法的关键代码
代码如下:
btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now = scrollTop; //滚动条竖直距离
speed = (0 - now) / 10;
speed = Math.floor(speed);
if (now == 0);
clearInterval(timer);
document.documentElement.scrollTop = now + speed; //标准模式下的浏览器
document.body.scrollTop = now + speed; //怪异模式下的浏览器
}, 15);
}

这里的代码主要还是参考了网上其他资源，再加了一点自己的理解。当然还有其他实现方法，比如JavaScript最早时间就支持的window.scrollTo()。用jQ来实现的话代码量将会变得很少，可参看w3cplus

个人觉得，先学好原生JavaScript，比如搞清楚数据类型，闭包，继承，作用域，DOM，CSS，事件处理，Ajax等，用熟练后学习其他框架将会容易很多。

热心网友时间：2022-05-17 23:06

1、在淘宝页面“店铺管理”选项中找到“店铺装修”，点击进入。

2、在网页的最下方找到“添加模块”选项，点击添加。

3、添加自定义内容区模块。

4、编辑添加的自定义内容区模块。

5、插入你自定义的图片。

6、右键单击你自定义的图片，在各个选项中点击“图片属性”。

7、在链接网址中输入【#top】，去掉新窗口打开链接前的【√】选项，然后点击【确定】。

8、在显示标题这个选项中，点击“不显示”；然后点击”确定”按钮。

9、添加成功后，点击发布以后就可以有淘宝首页返回顶部效果。

扩展资料：

淘宝网

淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。

淘宝充分赋予大数据个性化、粉丝工具、视频、社区等工具，搭台让卖家唱戏。利用优酷、微博、阿里妈妈、阿里影业等阿里生态圈的内容平台，紧密打造从内容生产到内容传播、内容消费的生态体系。

根据用户的需求，除了进行中心化供给和需求匹配，并形成自运营的内容生产和消费传播机制以外，还会基于地理位置，让用户商品和服务的供给需求能够获得更好的匹配。

参考资料：淘宝网_百度百科

热心网友时间：2022-05-18 00:24

热心网友时间：2022-05-18 01:58

在做热点的时候，直接在链接里写上 href=“#top” 就行了，如果是重新打开了一个页面，请检查一下你的代码里面是不是有target="_blank"，有的话删掉就行了

全部频道

淘宝首页返回顶部效果怎么做到的