javascript - 使用 jQuery 滚动到 div 时出现问题

Question

我在创建由 HTML onclick 事件处理程序调用的 jQuery 函数时遇到问题，该函数查找该特定元素的 ID，在其开头添加“#”，在末尾添加“-container”并分配它到一个变量。然后使用该变量将窗口滚动到该特定 div。我的 HTML 如下，jQuery 函数在其下方。

<div class="skill-grid">

    <div id="science" onclick="ScrollToDiv()">
        <div class="skill-text">science</div>
    </div>

    <div id="coding" onclick="ScrollToDiv()">
        <div class="skill-text">coding</div>
    </div>

    <div id="photography" onclick="ScrollToDiv()">
        <div class="skill-text">photography</div>
    </div>
</div>


<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>

我写的jQuery函数如下:

<script type='text/javascript'>
    function ScrollToDiv() {
    var container = "#" + $(this).attr('id') + "-container";
    $('html, body').animate({
        scrollTop: $(container).offset().top }, 2000);
    }    
</script>

我确实觉得我错过了一些非常简单的东西。任何帮助将非常感激!我也愿意采用新的/更好的方法来做到这一点!

感谢您抽出时间，

芬恩

Answer 1

更新此:

onclick="ScrollToDiv(this)" 
// in the above parameter you have to pass the current object's context.

在您的方法中传递当前上下文。并将函数更新为:

function ScrollToDiv(el) { // <---get the current object from the param here
    var container = "#" + $(el).attr('id') + "-container"; 
                    //----^^^^^ wrap it as jQuery object
    $('html, body').animate({
        scrollTop: $(container).offset().top 
    }, 2000);
} 

<小时/>

尽量不引人注目:

当您使用 jQuery 时，请执行以下操作:

将原始函数置于全局范围内:

function ScrollToDiv() {
    var container = "#" + $(this).attr('id') + "-container";
    $('html, body').animate({
        scrollTop: $(container).offset().top 
    }, 2000);
} 

并添加此脚本:

jQuery(function($){
     $('.skill-grid > div').click(ScrollToDiv);
});

<小时/>

或者如果你可以将你的 id 更改为这样的类:

<div class="skill-grid">
    <div id="science">
        <div class="skill-text">science</div>
    </div>
    <div id="coding">
        <div class="skill-text">coding</div>
    </div>
    <div id="photography">
        <div class="skill-text">photography</div>
    </div>
</div>


<div class="science"></div>
<div class="coding"></div>
<div class="photography"></div>

那么你可以这样做:

function ScrollToDiv() {
    var container = "." + this.id;
    $('html, body').animate({
        scrollTop: $(container).offset().top 
    }, 2000);
} 

jQuery(function($){
     $('.skill-grid > div').click(ScrollToDiv);
});