jquery平滑滚动到DIV - 使用链接的ID值

所以我有我的JQuery的一些问题，这是假设滚动到特定的div。jquery平滑滚动到DIV - 使用链接的ID值

HTML

<div id="searchbycharacter"> 
    <a class="searchbychar" href="#" id="#0-9" onclick="return false">0-9 |</a> 
    <a class="searchbychar" href="#" id="#A" onclick="return false"> A |</a> 
    <a class="searchbychar" href="#" id="#B" onclick="return false"> B |</a> 
    <a class="searchbychar" href="#" id="#C" onclick="return false"> C |</a> 
    ... Untill Z 
</div> 

<div id="0-9"> 
    <p>some content</p> 
</div> 

<div id="A"> 
    <p>some content</p> 
</div> 

<div id="B"> 
    <p>some content</p> 
</div> 

<div id="C"> 
    <p>some content</p> 
</div> 

... Untill Z

JQuery的

我想要的代码做的是：在一个.searchbychar的Click事件TAG>取ID属性值，然后滚动至。 ..

$('.searchbychar').click(function() { 

    $('html, body').animate({ 
     scrollTop: $('.searchbychar').attr('id').offset().top 
    }, 2000); 

});

来源

2013-09-16 Jack Tuck

从编号为 –

IDS意味着是唯一的，并且从未使用以数字开头的ID，使用数据的属性，而不是设定目标，像这样：

<div id="searchbycharacter"> 
    <a class="searchbychar" href="#" data-target="numeric">0-9 |</a> 
    <a class="searchbychar" href="#" data-target="A"> A |</a> 
    <a class="searchbychar" href="#" data-target="B"> B |</a> 
    <a class="searchbychar" href="#" data-target="C"> C |</a> 
    ... Untill Z 
</div>

至于jQuery的：

$(document).on('click','.searchbychar', function(event) { 
    event.preventDefault(); 
    var target = "#" + this.getAttribute('data-target'); 
    $('html, body').animate({ 
     scrollTop: $(target).offset().top 
    }, 2000); 
});

来源

2013-09-16 15:41:00

“scrollTop：$（'＃'+ this.id）.offset （）.top“>但是ID attr在那里已经有了'＃'，为什么会这样呢？ –

@JackWilliams没有注意到他在那里O.o它甚至是好的做法？ –

我从ID中删除了哈希值，并尝试了您的代码，这是我欣赏的方式，代码会滚动到页面的同一点（靠近div的位置），而不管哪个链接被按下。 pala畲的代码也一样。非常奇怪：-S –

您可以这样做：

$('.searchbychar').click(function() { 
    var divID = '#' + this.id; 
    $('html, body').animate({ 
     scrollTop: $(divID).offset().top 
    }, 2000); 
});

F.Y.I.

你需要在你的第一行代码一个.（点）喜欢一个前缀类名。
$('searchbychar').click(function() {
此外，您的代码$('.searchbychar').attr('id')将返回一个字符串ID而不是一个jQuery对象。因此，您不能对其应用.offset()方法。

来源

2013-09-16 15:40:09

的哈希感谢很多朋友...您的解释帮助我在这里...谢谢tonnnnnnnnn ...... –

这里是我的解决方案：

<!-- jquery smooth scroll to id's --> 
<script> 
$(function() { 
    $('a[href*=\\#]:not([href=\\#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 500); 
     return false; 
     } 
    } 
    }); 
}); 
</script>

只需这个片段中，你CA n使用无限数量的散列链接和相应的ID，而无需为每个脚本执行新的脚本。

我已经解释它是如何工作在这里另一个线程：https://stackoverflow.com/a/28631803/4566435（或这里的direct link to my blog post）

对于澄清，让我知道。希望能帮助到你！

来源

2015-02-20 14:56:24

jquery平滑滚动到DIV - 使用链接的ID值

回答

相关问题