Question

请我不是专家开发人员，我需要有关此功能的帮助;我是从意大利写的，对不起我的英语。

我的page.html有这个功能：

<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="art", when one of them is clicked, get its "href" value
// load the content from that URL and place it into the tag with id="contentart"
$('a.art').click(function() {
var url = $(this).attr('href');
$('#contentart').load(url);
return false;
});
});
</script>

在html代码中我有很多

<a class="art" href="part1.html">link 1</a>
<a class="art" href="part2.html">link 2</a>
<a class="art" href="part3.html">link 3</a>
ecc. ecc

并在容器结束时：

<div style="width: 100%" id="contentart"></div>

我的问题是，当客户点击链接href时，div会在非常长的距离（2或3个屏幕底部）打开，因为它们是友情链接而客户看不到它。问题：可能是一个包含“contentart”页面的函数，并在此DIV“contentart”的顶部做一个scrollTo吗？非常感谢意大利。 Arcibald

Answer 1

$('html, body').animate({
    scrollTop: $("#contentart").offset().top
}, 2000);

请参阅jQuery scroll to element

Answer 2

试试这个。我已经为你的div添加了动画滚动

<script type="text/javascript">
$(document).ready(function() {
    // select all the links with class="art", when one of them is clicked, get its "href" value
    // load the content from that URL and place it into the tag with id="contentart"
    $('a.art').click(function() {
        var url = $(this).attr('href');
        $('#contentart').load(url);

        $('html,body').animate({scrollTop: parseInt($('#contentart').offset().top)}, 'slow');
        return false;
    });
});
</script>

Answer 3

快速滚动到同一页面内某个位置的另一种方法是

使用其中包含id的锚

示例：

<body>

<p><a href="#foo">Go to foo</a></p>

<h2>alpha</h2>
<p>alpha alpha</p>

<h2>beta</h2>
<p>beta beta</p>

<h2><a id="foo">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>gamma</h2>
<p>gamma gamma</p>

进一步阅读here

点击需要双重功能

3 个答案: