Question

我在创建一个由HTML onclick事件处理程序调用的jQuery函数时遇到问题，该事件处理程序找到该特定元素的ID，添加一个＆＃34;＃＆＃34;到它的开始和＆＃34; -container＆＃34;到最后并将其分配给变量。然后使用此变量将窗口滚动到该特定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>

使用jQuery滚动到div的问题

2 个答案:

当你使用jQuery时这样做：