Question

由于我的菜单结构的方式，我无法使用＆＃34; a href＆＃34;滚动到我的页面的特定部分。

相反，我正在使用＆＃34;

<li onclick="location.href='#testimonials';">Testimonials</li>

该链接有效，但它只是跳转到该部分而不是滚动到它。

有没有办法让这种顺利滚动？

提前致谢！

Answer 1

无需使用插件。您可以轻松地使用jQuery为“scrollTop”设置动画：

var scrollValue = $("ELEMENT").offset().top; // get position of element
$("html, body").animate({
    scrollTop: scrollValue // scroll to position
}, "slow");

要获得锚点，您可以使用.attr（）

$("a").on("click", function(e) {
    var anchorLink = $(this).attr("href"),
        scrollValue = $(anchorLink).offset().top;
    // Scroll to position    
});

修改如果你不想为它使用[href]，你也可以在HTML中使用数据属性，如下所示：

<div data-slideto="#element">Slide to</div>

您可以使用jQuery获取数据属性值：.attr（“data-slideto”）或.data（“slideto”）

Answer 2

这应该可以解决问题。

<a class="link" href="#scrollto">scroll</a>
<p style="height: 1000px;"></p>
<div id="scrollto">test</div>

$('.link').click(function(e) {
    e.preventDefault();
    var targetOffset = $($(this).attr('href')).offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
});

以下是相应的jsfiddle。

jQuery平滑滚动没有使用ahref

2 个答案: