使用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);
});

Answer 2

如果可以，请重新考虑您的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>