0

查询： 

k = get the element that is being clicked on.
$('k').click(function() { //based on the element and where it should scroll to
    $('body,html').animate({scrollTo: /*target*/},800); /*target==where its scrolling to*/
});

HTML：

    <a id="a1" class="pointto">1</a>
    <a id="a2" class="pointto">2</a>
    <a id="a3" class="pointto">3</a>
    <a id="a4" class="pointto">4</a>
    <a id="a5" class="pointto">5</a>

    <a name="1">1. This is where it scrolls to</a>
    <a name="2">2. This is where it scrolls to</a>
    <a name="3">3. This is where it scrolls to</a>
    <a name="4">4. This is where it scrolls to</a>
    <a name="5">5. This is where it scrolls to</a>

我想要完成的是使用单个“click()”函数滚动到受尊重的链接目标。

例如，如果a1单击 ，滚动到1。如果a2单击，滚动到2等等...

我在我的页面中使用了所有这些代码，如果我添加click()下面的函数，我会得到一个错误：

$(function() {
    $('#theEmail').keyup(function() {
        if (this.value.match(/[^\-_a-zA-Z0-9 ]/g)) {
            this.value = this.value.replace(/[^\-_a-zA-Z0-9 ]/g, '');
        }
    });
    $(".pointto").mouseover(function() {
        $(this).addClass("Hover");
    });
    $(".pointto").mouseout(function() {
        $(this).removeClass("Hover").removeClass("Pressed");
    });
    $(".pointto").mousedown(function() {
        $(this).addClass("Pressed");
    });
    $(".pointto").mouseup(function() {
        $(this).removeClass("Pressed");
    });
    $('.pointto').click(function() { 
        var nn = parseInt($(this).attr('id'), 10);
        var top = $('a[name='"+nn+"']').offset().top;
        $('body,html').animate({scrollTop:top},800);
    });
});

Error: Expected ')' in line: var top = $('a[name='"+nn+"']').offset().top;

4

5 回答 5

4 
$('.pointto').click(function() { 
    var nn = $(this).attr('id').replace('a',''),
    t = $('a[name="'+nn+'"]').offset().top;
    $('body,html').animate({scrollTop:t},800);
});

如果您更改类，则必须使用事件委托。而不是(document)您可以使用静态选择器，例如这些链接的父级之一

$(document).on('click', '.Hover, .Pressed, .pointto', function() { 
    var nn = $(this).attr('id').replace('a',''),
    t = $('a[name="'+nn+'"]').offset().top;
    $('body,html').animate({scrollTop:t},800);
});
于 2013-06-20T17:31:09.260 回答
1

我认为这是“正确”的做法：

http://jsfiddle.net/7wr7G/

html:

<a href="#1" class="pointto">1</a>
<a href="#2" class="pointto">2</a>
<a href="#3" class="pointto">3</a>
<a href="#4" class="pointto">4</a>
<a href="#5" class="pointto">5</a>
<div style="height: 300px;"></div>
<a name="1">1. This is where it scrolls to</a>
<div style="height: 300px;"></div>
<a name="2">2. This is where it scrolls to</a>
<div style="height: 300px;"></div>
<a name="3">3. This is where it scrolls to</a>
<div style="height: 300px;"></div>
<a name="4">4. This is where it scrolls to</a>
<div style="height: 300px;"></div>
<a name="5">5. This is where it scrolls to</a>
<div style="height: 900px;"></div>

javascript:

$(".pointto").click(function(e){
    e.preventDefault();
    var target = $("[name=" + this.href.split("#")[1] + "]").offset().top;
    $("body,html").animate({"scroll-top":target},800);
});

它允许深度链接/书签，并在禁用 javascript 的情况下工作。

于 2013-06-20T17:37:19.947 回答
1 
$('.pointto').click(function () {
    target_name = $(this).attr('id').substr(1);
    target = $('a[name="' + target_name + '"]');

    $('body, html').animate({scrollTo: $(target).offset().top}, 800);
})

小提琴

于 2013-06-20T17:38:21.583 回答
1 
$('.pointto').click(function () {
    var target = this.id.replace('a', ''),
        offset = $('a[name="' + target + '"]').offset().top;
    $('body, html').animate({scrollTop: offset}, 800);
});

小提琴

注意：在我打字的时候，有几个人抢了我的帖子，所以如果它没有用我可以删除。

于 2013-06-20T17:40:28.967 回答
0

在名称=“1”后添加类=“k”

在 jquery 中使用 $('ak')............

$('a.k').each(function () {
            $(this).click(function () {
                //if $(this).attr("name") = 1 do this
                //or use a jquery equivalent to a case statement
            });
        });
于 2013-06-20T17:33:39.527 回答