Javascript 使用jQuery滚动到div时出现的问题

我在创建一个jQuery函数时遇到了问题，该函数由一个HTML onclick事件处理程序调用，该处理程序查找特定元素的ID，在它的开头添加一个“#”，在结尾添加一个“-container”，并将它赋给一个变量。然后使用此变量将窗口滚动到该特定div。My 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>

函数ScrollToDiv（）{
var container=“#”+$（this.attr（'id'）+“-container”；
$（'html，body'）。设置动画({
scrollTop:$（container.offset（）.top}，2000）；
}    

我确实觉得我错过了一些非常简单的事情。任何帮助都将不胜感激！我也乐于接受一种新的/更好的方法来做到这一点

谢谢你抽出时间

芬兰人更新：

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

---

如果可以，请重新考虑html结构：

        <div class="skill-grid">
            <div id="science">
                <div class="skill-text"><a class="click" href="#science-container">science</a></div>
            </div>

            <div id="coding">
                <div class="skill-text"><a class="click" href="#coding-container">coding</a></div>
            </div>

            <div id="photography">
                <div class="skill-text"><a class="click" href="#photography-container">photography</a></div>
            </div>
        </div>

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


        <script>
            $(function(){
                $('a.click').on('click', function(e){
                    var offset = $(this.hash).offset().top;
                    $('html, body').animate({
                        scrollTop: offset
                    }, 2000
                );
                return false;
            });
        });
</script>

$（函数（）{
$（'a.click'）。在（'click'，函数（e）{
var offset=$（this.hash）.offset（）.top；
$（'html，body'）。设置动画({
滚动顶：偏移量
}, 2000
);
返回false；
});
});

这是什么？我猜不是你所期望的。尝试使用jQuery附加处理程序。谢谢！就是这样。我需要读一些关于如何使用“this”的书。干杯如果你能解释一下它是如何工作的，而不是仅仅给他一个答案，那就太好了。但是+1表示友好而迅速的响应！

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

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

        <div class="skill-grid">
            <div id="science">
                <div class="skill-text"><a class="click" href="#science-container">science</a></div>
            </div>

            <div id="coding">
                <div class="skill-text"><a class="click" href="#coding-container">coding</a></div>
            </div>

            <div id="photography">
                <div class="skill-text"><a class="click" href="#photography-container">photography</a></div>
            </div>
        </div>

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


        <script>
            $(function(){
                $('a.click').on('click', function(e){
                    var offset = $(this.hash).offset().top;
                    $('html, body').animate({
                        scrollTop: offset
                    }, 2000
                );
                return false;
            });
        });
</script>