Question

是的，我想用javascript数组代码替换一个简单的锚链接。我们在这里做了很长的（也可能很复杂的）方式。我认为这将是一个简单的scrollTo属性，但我仍然无法让页面滚动或跳转到页面上的任何其他位置。有人可以告诉我，我做错了吗？

这是javascript。

$(function(){
    //Search index for Cards
    var gameA = new Array('normal','ex','promo','counterfeit');

    $('#go').click(function(e){
        var term = $('#term').val();
        var searchIndex = gameA.indexOf(term);
        console.log(term);
        console.log(searchIndex);
        if (searchIndex > -1){
            console.log("hi");
            window.scrollTo(0,"#sec"+searchIndex);
        } 
    });
});

这是我的源代码。

<h2 id="top">Select a Term</h2>
<p>List: Normal, Ex, Promo, Counterfeit</p>
<form action="javascript:void(0)">
<label for"term">Enter a term from the list above.</label><br>
<input type="text" id="term" name="term">
<button id="go">Go</button>
</form>
</div>
<br><br>
<img src="images/fancycards.jpg" width="1191" height="670" alt="fancy cards"><br>

<h2 id="sec0">Normal Cards</h2>
<p><a href="#top">Back to Top</a></p>
<img src="images/cards.jpg" width="1131" height="707" alt="cards"><br>

<h2 id="sec1">Ex Cards</h2>
<p></p>
<img src="images/excards.jpg" width="1000" height="653" alt="ex cards"><br>

Answer 1

看起来window.scrollTo取两个参数的坐标，而不是元素的ID。

尝试以下代替当前的scrollTo命令：

window.scrollTo(0, $("#sec"+searchIndex).offset().top)

这是一个包含此更改的JSFiddle示例。图像显然不会显示，但它会正确滚动：http://jsfiddle.net/1mpqm1te/1/

Answer 2

您需要将数字传递给scrollTo（）函数，而不是字符串。这将是您要滚动到的元素的Y偏移量。这是一个更新版本！如果我们给卡部分提供语义敏感的ID值（＆＃39;普通卡＆＃39;，＆＃39; ex-cards＆＃39;等），我们可以很容易地实现这一点！

http://jsfiddle.net/yLvhh53a/

＆＃13;

$(function () {
    //Search index for Cards
    var gameA = new Array('normal', 'ex', 'promo', 'counterfeit');

    $('#go').click(function (e) {
        var term = $('#term').val();
        console.log(term);
        var item = $('#' + term + '-cards');
        console.log(item);
        
        $('html, body').animate({
            scrollTop: item.offset().top
        }, 1000);


    });

});

＆＃13;

<h2 id="top">Select a Term</h2>

<p>List: Normal, Ex, Promo, Counterfeit</p>
<form action="javascript:void(0)">
    <label for "term">Enter a term from the list above.</label>
    <br>
    <input type="text" id="term" name="term">
    <button id="go">Go</button>
</form>
</div>
<br>
<br>
<img src="images/fancycards.jpg" width="1191" height="670" alt="fancy cards">
<br>

<h2 id="normal-cards">Normal Cards</h2>

<p><a href="#top">Back to Top</a>
</p>
<img src="images/cards.jpg" width="1131" height="707" alt="cards">
<br>

<h2 id="ex-cards">Ex Cards</h2>

<p></p>
<img src="images/excards.jpg" width="1000" height="653" alt="ex cards">
<br>

＆＃13;

这样，您甚至不需要引用数组。对于您添加的每个部分，只需确保它具有一致的ID '[name]-cards'，它就会自动找到它。如果您愿意，也可以更改滚动速度。

Answer 3

滚动到具有ID的元素时。您只需更改网址的哈希就可以了。

用Javascript数组替换Anchor代码

3 个答案: