Question

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;

Answer 1

$('.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);
});

Answer 2

我认为这是“正确”的方式：

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。

Answer 3

$('.pointto').click(function () {
    target_name = $(this).attr('id').substr(1);
    target = $('a[name="' + target_name + '"]');

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

fiddle

Answer 4

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

Fiddle

注意：当我输入此内容时，有几个人打我这个帖子，所以我可以删除它是否有用。

Answer 5

在name =“1”之后添加class =“k”

在jquery中使用$（'a.k'）...........

$('a.k').each(function () {
            $(this).click(function () {
                //if $(this).attr("name") = 1 do this
                //or use a jquery equivalent to a case statement
            });
        });

使用Link滚动到“名称”

5 个答案: