0

JQuery: 

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)、それらのリンクの親の 1 つのように、静的セレクターを使用できます。

$(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 
$('.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 に答える
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 に答える
0

name="1" の後に class="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 に答える