通过平滑滚动导航到不同页面上的 div

Question

我正在尝试在单击a 类中的a 元素时进行平滑滚动。它正在重定向到对应的 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;
});

galary.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);

    }
});