1

我正在开发一个带有垂直平滑滚动 jquery 的单页网站。在导航栏中，我有 Home、About、Services、Gallery 和 Contact 链接，它们与垂直平滑滚动 jquery 插件一起工作正常。

现在，在我的画廊部分的底部，我有一句话（段落）说：如果你喜欢我的作品，请与我联系以获取更多信息。同一段落中的“获取联系”实际上是一个小的 .png 文件，我希望它能够正常工作，因此当用户单击它时 - 它会向下滚动到联系页面（就像我的导航栏中的任何其他链接一样有效美好的）。

这是我的 jquery 平滑滚动：

$(function () {
    $('header ul a').bind('click', function (event) {
        var $anchor = $(this);

        $('html, body').animate({
            scrollTop: $($anchor.attr('href')).offset().top + "px"
        }, 1500);
        /*
        if you don't want to use the easing effects:
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        */
        event.preventDefault();
    });
});

这是我的 GET IN TOUCH 图片段落：

<div class="getintouch">
    <p class="left">If you like my work</p>
    <img src="images/getintouch.png" />
    <p class="right">for more information.</p>
</div>

我试图添加 id="contact" 到<img>这样的：

<div class="getintouch">
    <p class="left">If you like my work</p>
    <img id="contact" src="images/getintouch.png" />
    <p class="right">for more information.</p>
</div>

...然后我像这样修改了 jquery 平滑滚动：

$(function () {
    $('header ul a, .getintouch img').bind('click', function (event) {
        var $anchor = $(this);

但它不起作用。

不确定这是否可行，但我想让这个 GET IN TOUCH.png 向下滚动以联系。希望大家能帮忙！谢谢

4

1 回答 1

0

好吧，你没有任何href属性img......

其次，为什么不只是谷歌 - http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page：

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},1500);
}

$("#link").click(function() {
   scrollToAnchor('id3');
});

http://jsfiddle.net/BjpWB/1551/

于 2013-08-30T10:49:26.670 回答