Question

单击滑块按钮后，如何停止浏览器页面滚动到浏览器中的最高位置？我已经假设问题在于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>

Answer 1

由于您的href="#"代码具有属性http://yoursite.com/your/page#，因此默认浏览器行为是导航到网址id。这具有浏览器向上滚动到页面顶部的效果（因为它查找具有空白return false;的内容，但没有找到，因此只需滚动到页面顶部）。

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

.preventDefault();或
调用函数传递的event参数上的{{1}}方法作为第一个参数。

Answer 2

取消点击链接

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

（也为另一个做）

Answer 3

我认为这是因为你有一个href =＆＃34;＃＆＃34;所以我将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>

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

3 个答案: