javascript 按钮单击事件后浏览器页面意外滚动到最顶部位置答案

【问题标题】：browser page unexpectedly scrolls to topmost position after javascript button click eventjavascript 按钮单击事件后浏览器页面意外滚动到最顶部位置
【发布时间】：2015-07-22 23:38:40
【问题描述】：

单击滑块按钮后，如何阻止浏览器页面滚动到浏览器中的最顶部位置？我假设问题出在 javascript 上，因为在触发按钮单击事件后会发生不希望的和强制向上滚动，但我不完全确定。我已经发布了我的代码和标记，以便可以重现此错误并简化调试，我将 html、css 和 javascript 组合在一个文件中。任何见解将不胜感激。

<!DOCTYPE html>
  <html>
  <head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

});  

</script>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

nav { 
float: left;
background-color: #EEEFFF;
height: 1500px;
width: 100px;
}

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

a.control_prev {
border-radius: 0 2px 2px 0;
}

a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

</style>
</head>

<body>
<nav>
test
</nav>
<div id="slider">
  <a href="#" class="control_next"></a>
  <a href="#" class="control_prev"></a>
    <ul>
     <li>SLIDE 1</li>
     <li style="background: #aaa;">SLIDE 2</li>
     <li>SLIDE 3</li>
     <li style="background: #aaa;">SLIDE 4</li>
    </ul>  
</div>
</body>
</html>

【问题讨论】：

标签： javascript html css browser

【解决方案1】：

因为您的<a> 标记具有href="#" 属性，默认浏览器行为是导航到URL http://yoursite.com/your/page#。这具有浏览器向上滚动到页面顶部的效果（因为它会查找带有空白 id 的内容，但没有找到，所以只滚动到页面顶部）。

您可以在 Javascript 点击处理函数中使用两种技术之一来阻止这种默认浏览器行为：

return false; 来自处理函数；或
在您的函数作为第一个参数传递的event 参数上调用.preventDefault() 方法。

【讨论】：

【解决方案2】：

取消点击链接

$('a.control_prev').click(function (e) {
    moveLeft();
    e.preventDefault();
});

（也为别人做）

【讨论】：

【解决方案3】：

我认为那是因为你有一个 href="#"，所以我将 a 标签更改为按钮标签，并在 jquery 和 css 中更改它们，我添加了：border:solid transparent;，使其成为看起来和带标签的时候差不多，这是最终代码：

<!DOCTYPE html>
  <html>
  <head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('button.control_prev').click(function () {
    moveLeft();
});

$('button.control_next').click(function () {
    moveRight();
});

});  

</script>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

nav { 
float: left;
background-color: #EEEFFF;
height: 1500px;
width: 100px;
}

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

button.control_prev, button.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
border:solid transparent;
}

button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

button.control_prev {
border-radius: 0 2px 2px 0;
}

button.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

</style>
</head>

<body>
<nav>
test
</nav>
<div id="slider">
  <button class="control_next"></button>
  <button class="control_prev"></button>
    <ul>
     <li>SLIDE 1</li>
     <li style="background: #aaa;">SLIDE 2</li>
     <li>SLIDE 3</li>
     <li style="background: #aaa;">SLIDE 4</li>
    </ul>  
</div>
</body>
</html>

【讨论】：