面试题：设计一个容器，当容器中内容高于容器高度时，出现滚动条，滚动条样式自定义，滚动条可实现上下拖动、鼠标滚动，回到顶部等功能（参考浏览器滚动条）。
起初我写的代码是这样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="ie=chrome,chrome=1">
<title>滚动条</title>
<style>
.mydiv{
height: 500px;
width: 500px;
border: 1px solid #000;
overflow: scroll;
}
.myimg{
width: 400px;
}
.mycontent{
font-size: 12px;
color:mediumblue;
}
</style>
</head>
<body>
<div class="mydiv">
<div class="mycontent">
这是我第一次博客，以前一直是写代码不会了百度查找问题怎么解决，最近辞职找工作一点都不乐观，可以顺便记录一下这段时间的经历。
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
万维网（world wide web）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
定义
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
</div>
<img class="myimg" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
</div>
</body>
</html>
滚动条功能仅仅在div容器的样式上加一个“overflow: scroll;”就可以实现，由此，就只需要再写一个返回顶部top的按钮就可以完成了。
通过资料查找发现比较简单的实现可以有以下两种方法：
<a href="#top" target="_self">返回顶部</a>
<a href="javascript:scroll(0,0)">返回顶部</a>
但是我加入代码发现并没有成功。原因是这两种方法是基于主屏幕的返回顶部方法，而我现在是在容器内部返回至容器顶部。
修改方案：使用第一种方法，将a标签的锚点修改成我们自己定义的容器顶部的锚点，具体<div class="mycontent">里添加锚点id=“here"，而后修改a标签锚点id，<a href="#here" target="_self">返回顶部</a>；
使用第二种方法则需要将容器内的起始点找到，修改scroll(0,0)的坐标。
function getRect(){
rect = document.getElementById("here").getBoundingClientRect();
scroll(rect.x,rect.y);
console.log(rect);
}
将”返回顶部”悬浮显示，固定在底部右下角。
使用position：fixed 相对定位，但是position：fixed是相对浏览器-即祖先元素(transform的属性不为none)定位
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
