【问题标题】:when clicking on image href=# it scrolls to the top单击图像 href=# 时,它会滚动到顶部
【发布时间】:2012-07-25 00:53:16
【问题描述】:

以下是我用于我的网站的代码 每个图像链接都设置为在单击时前进到下一个图像 问题是,当我单击图像时,页面会滚动回顶部。我希望这停止

我在 onclick 标记上使用了 return false 标记,但是当单击图像时,它会连续滚动图像数组。

有什么解决办法吗?下面是我的代码

<script language="JavaScript">

  <!-- -->


var interval = 1500;
var random_display = 0;
var imageDir = "imgs/";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "1.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "2.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "3.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "4.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "5.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "6.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "7.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "8.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "9.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "10.jpg");

var imageNumTwo = 0;
imageArrayTwo = new Array();
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t1.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t2.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t3.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t4.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t5.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t6.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t7.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t8.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t9.jpg");
imageArrayTwo[imageNumTwo++] = new imageItem(imageDir + "t10.jpg"); 

var imageNumThree = 0;
imageArrayThree = new Array();
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th1.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th2.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th3.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th4.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th5.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th6.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th7.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th8.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th9.jpg");
imageArrayThree[imageNumThree++] = new imageItem(imageDir + "th10.jpg");    


var totalImages = imageArray.length;
var totalImagesTwo = imageArrayTwo.length;
var totalImagesThree = imageArrayThree.length;

function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
}


function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
    if (random_display) {
        imageNum = randNum(0, totalImages-1);
    }
    else {
        imageNum = (imageNum+1) % totalImages;
    }   

    var new_image = get_ImageItemLocation(imageArray[imageNum]);
return(new_image);
}


function getNextImageTwo() {
    if (random_display) {
        imageNumTwo = randNum(0, totalImagesTwo-1);
    }
    else {
        imageNumTwo = (imageNumTwo+1) % totalImagesTwo;
    }   

    var new_image = get_ImageItemLocation(imageArrayTwo[imageNumTwo]);
return(new_image);
}


function getNextImageThree() {
    if (random_display) {
        imageNumThree = randNum(0, totalImagesTwo-1);
    }
    else {
        imageNumThree = (imageNumThree+1) % totalImagesThree;
    }   

    var new_image = get_ImageItemLocation(imageArrayThree[imageNumThree]);
return(new_image);
}


function prevImage(place) {
    var new_image = getPrevImage();
    document[place].src = new_image;
}

function switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }

function switchImageTwo(place) {
    var new_image = getNextImageTwo();
    document[place].src = new_image;
    var recur_call = "switchImageTwo('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }


function switchImageThree(place) {
    var new_image = getNextImageThree();
    document[place].src = new_image;
    var recur_call = "switchImageThree('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }


</script>




  </head>

<body>


<div id="content">
<div id="title"><a href="mailto:hello@a.com"><center><img src="imgs/adil.gif" alt="A D I L" width="293" height="115" border="0"></center></a></div>
<div id="books">
  <p><a href="#" onclick="switchImage('slideImg'); clearTimeout(timerID)"><img src="imgs/1.jpg" name="slideImg" width="300" height="427" border="0"></a>
  <img src="imgs/px.gif" width="40">
  <a href="#" onclick="switchImageTwo('slideImg2'); clearTimeout(timerID)"><img src="imgs/t1.jpg" name="slideImg2" width="300" height="423" border="0"></a>
  <img src="imgs/px.gif" width="40">
  <a href="#" onclick="switchImageThree('slideImg3'); clearTimeout(timerID)"><img src="imgs/th1.jpg" name="slideImg3" width="300" height="427" border="0"></a>
  <img src="imgs/px.gif" width="993" height="40"></p>

【问题讨论】:

标签: javascript html


【解决方案1】:

我认为您只需要从单击处理程序调用的任何函数中返回 false。

【讨论】:

  • 我已经做到了。它有助于停止滚动到顶部,但随后出现了一个新问题。那个问题是数组中的图像在没有被点击的情况下不断切换
  • 您应该在代码中寻找导致持续图像切换的基本问题的问题 - 包括您的点击处理程序的设置方式会有所帮助。您也可以尝试使用 preventDefault 而不是返回 false (developer.mozilla.org/en/DOM:event.preventDefault)。
猜你喜欢
  • 2020-02-11
  • 1970-01-01
  • 2021-06-26
  • 2012-10-25
  • 1970-01-01
  • 2015-01-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多