Question

我在点击a课程中的.panel元素时尝试进行平滑滚动。它正在重定向到同名的id。但平滑滚动不起作用。

的index.php

<div class="panel">
    <p><a href="gallary.php#singleclr_led">SINGLE COLOUR LED</a></p>
    <p><a href="gallary.php#doubleclr_led">TWO COLOUR LED</a></p>
    <p><a href="gallary.php#multiclr_led">MULTI COLOUR LED</a></p>
    <p><a href="gallary.php#indoor_led">INDOOR LED DISPLAY</a></p>
    <p><a href="gallary.php#outdoor_led">OUTDOOR LED DISPLAY</a></p>
</div>

jquery的

$('.panel a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

gallary.php

 <div class="col-md-6 col-xs-12 gallary-img1" id="multiclr_led">
                <div class="hovereffect">
                    <img src="images/colorimg.jpg" class="img-responsive "alt="">
                    <div class="overlay">
                        <h2>MULTI COLOUR LED</h2>
                        <div class="hover-content">
                            <P>6 colors are possible like in addition to RGB, they are cyan, magenta & yellow. This property is well utilized by the motherboard manufacturer, to show the power indication, RED means lower power than the recommended rating, green means ambient power etc. So they compacted the space requirements.</P>
                        </div>
                    </div>
                </div>
            </div>

找不到问题。帮助解决此问题。提前谢谢。

Answer 1

尝试使用以下代码（将其放在gallery.php文件中）：

$(document).ready(function(){

    var anchor = window.location.hash;

    if ( $(anchor).length > 0 ) {

        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);

    }
});

使用平滑滚动导航到不同页面上的div

1 个答案: