点击页面底部的a标签为啥滚动条会滚到页面顶端?

页面就是这么简单!为啥a标签点击后滚动条会滚到页面顶端?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jshint</title>

    <style type="text/css">

        body{

            height:1500px;

        }

        #fill{

            width:1000px;

            height:1000px;

        }

        #a{

            display: block;

            width:300px;

            height:30px;

            border:5px solid black;

        }

    </style>

</head>

<body>

<div id="fill"></div>

<a href="" id="a">点我改变边框颜色</a>

<script type="text/javascript">

    document.getElementById('a').onclick = function () {

        this.style.cssText = 'border:5px solid red;'

    };

</script>

</body>

</html>


萧十郎
浏览 869回答 1
1回答

智慧大石

这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号(#),它指定一个内部目标在当前文档中的位置(ID)开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。例如,文件,FTP,大多数用户代理mailto工作。你在href里面置空,相当于给定了一个空的URI,然后浏览器默认合并当前的URL,最后生成了和当前URL一样的一个PATH,然后就跳转至这个PATH,然后就相当于刷新了当前页面。可能由于你本地或者缓存,这个刷新的操作很快,以至于让你有了滚动到顶部的错觉。解决办法通常是加#或者javascript:void(0),或者给这个a标签绑定js的click事件,再阻止默认。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript