通过jQuery在外部点击滚动到DIV内的锚点 [英] Scrolling to an anchor within a DIV on external click, via jQuery

问题描述

我有一个滚动分部，其中包含一系列酒店，按字母顺序分组。在这个部门之上，我有一个按字母顺序排列的链接索引，当点击时，我希望相应的字母顺序向上滚动，在分区内。

我花了大约一个小时在网上冲刷，尝试各种技术，并没有发现任何我在寻找的东西，或者至少我能理解的东西;我不是jQuery的天才。

任何协助都将不胜感激！

解决方案

您想要的是 element.scrollIntoView（）; 这将滚动浏览器窗口/ div，使元素在页面上可见。

一个例子：小提琴链接

更新：增加了一个更完整的动态示例。

CSS

  #container {
 overflow：auto; 
 height：50px; 
} 
 
 .scrollto {
颜色：蓝色; 
 text-decoration：下划线; 
光标：指针; 
} 
  

HTML $ b

 < span class =scrollto> a< / span> < span class =scrollto> e< / span> < span class =scrollto> i< / span> 
 
< div id ='container'> 
< div id =a> a< / div> 
< div id =b> b< / div> 
< div id =c> c< / div> 
< div id =d> d< / div> 
< div id =e> e< / div> 
< div id =f> f< / div> 
< div id =g> g< / div> 
< div id =h> h< / div> 
< div id =i> i< / div> 
< / div> 
  

JS
< （）。$（$＃$ + $（this）.text（））。get（0）。pre $ <'c $ c> $（'。scrollto'）。 scrollIntoView（）;
//或$（'＃'+ $（this）.text（））[0] .scrollIntoView（）;
}）;

基本上在这个例子中，我创建了一个小的溢出div，使它有一个滚动条。

然后我在里面的div标签上使用 id 锚点来标记其中的不同区域。点击后，我有一个超出div范围的跨度自动滚动到溢出div内的某个锚点。

---

@Wayne Smallman ：根据评论中的html代码，这是你要使用的内容

  $（ '（$（this）.attr（'href'））。get（0）.scrollIntoView（）; 
}） ; 
  

小提琴演示

I have a scrolling division which contains a list of hotels, grouped alphabetically. Above this division, I have an alphabetical index of links, which when clicked, I would like the corresponding alphabetical item to scroll upwards, within the division.

I've spent about an hour scouring the web and trying various techniques, and haven't found anything that does what I'm looking for, or at least something I can understand; I'm no jQuery genius.

Any assistance would be much appreciated!

解决方案

What you want is element.scrollIntoView(); this will scroll the browser window/div to make an element visible on the page.

An example of this: fiddle link

Update: Added a more complete dynamic example.

CSS

#container {
    overflow: auto;
    height: 50px;
}

.scrollto {
    color: blue;
    text-decoration: underline;  
    cursor: pointer;
}

HTML

<span class="scrollto">a</span>  <span class="scrollto">e</span> <span class="scrollto">i</span>

<div id='container'>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
    <div id="f">f</div>
    <div id="g">g</div>
    <div id="h">h</div>
    <div id="i">i</div>
</div>

JS 

$('.scrollto').click(function() {
   $('#' + $(this).text()).get(0).scrollIntoView();
   // or $('#' + $(this).text())[0].scrollIntoView();
});

Basically in this example I created a small overflowed div causing it to have a scrollbar.

I then use id anchors on div tags inside of it to label the different areas in it. I have a span outside the div to auto scroll to a certain anchor point inside the overflowed div when clicked.

---

@Wayne Smallman: As per the html code in your comment, this is what you would use

$('div#index ul li a').click(function() {
    $($(this).attr('href')).get(0).scrollIntoView();
});

Fiddle Demo

这篇关于通过jQuery在外部点击滚动到DIV内的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！