Question

我有一个应用程序（学习Meteor）。我做了一个博客＆＃34;与应用程序中的新闻。要修改我的新闻，

以下是旅程

1.Click on Modify Link --> it works
2.Put a modify form on the bottom of the page --> it works
3.Save --> it works
4.Then i want to scroll to the item I've modified

有代码

<li id="li">
<div>
    <img id="pic" src= {{photo}} />
</div>
<div>
    <label id="titreArticle">{{titre}}</label>
    {{#if isOwner}}
       {{#unless wantModif}}
    <button class="delete" style="color:black">&times;</button>
    <button class="modify" style="color:black">modify</button>
      {{/unless}}
    {{/if}}
    <p id="dateHeure"><strong>Ecrit par: {{username}} le {{date}} à {{heure}}</strong></p>
    <br>
</div>
<div id="textContenu">
    <span>{{text}}</span>
</div>

我试图这样做：

   Articles.find({_id: taskId}).scrollIntoView();
   window.scrollTo(0,Articles.find({_id: taskId}));

如果有人能帮助我，我会感激不尽

Answer 1

您只需更改location.hash即可向下滚动到您的ID

进一步参考： http://www.w3schools.com/jsref/prop_loc_hash.asp http://www.w3schools.com/jsref/obj_location.asp

＆＃13;

$('#clickme').on('click', function() {
  $('p').last().after('<form id="modifyForm">Here is a supposed form<input type="submit" value="Bogus"/></form>');
  location.hash = '#modifyForm';
});

＆＃13;

p {
  font-style: italic;
}
form {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button id="clickme">Click me</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a rhoncus velit. Curabitur ornare elementum dui non eleifend. Aliquam eleifend vestibulum ornare. Nullam ex lorem, tincidunt at est a, congue ornare dui. Donec fermentum, tortor eu mattis congue, ante massa pharetra purus, non tristique nunc nisi fringilla metus. Aliquam accumsan consequat ex maximus placerat. Quisque quis interdum eros. Donec ex nisl, ultricies sit amet feugiat vel, ullamcorper nec massa. Maecenas enim enim, tincidunt at tincidunt nec, fermentum sed metus. Curabitur dolor lacus, eleifend vitae bibendum quis, bibendum et turpis. Donec faucibus ligula sit amet eros dapibus porttitor.

<p>Nam id lorem non leo dictum rutrum. Fusce mollis eros consectetur urna accumsan pharetra. Nam posuere volutpat enim convallis tincidunt. Sed mi lectus, malesuada eu accumsan in, ornare at urna. Suspendisse potenti. Donec placerat lorem et maximus egestas. Nullam augue massa, ornare ac condimentum sed, venenatis et leo. Aliquam erat volutpat. Vestibulum ullamcorper convallis augue sed lacinia. Vestibulum in porttitor quam. Pellentesque bibendum leo eu diam accumsan, sit amet pharetra dui sollicitudin. Donec consequat massa est, et iaculis risus dictum ac.

<p>Pellentesque eu sapien dignissim, tempor odio ut, tempus quam. Integer condimentum sapien massa, ac cursus ipsum semper viverra. Proin et rutrum elit, ac placerat ex. Aenean vulputate diam quis magna viverra, et porta leo vestibulum. Aliquam diam velit, ornare at tellus non, dapibus ornare urna. Donec ultricies est placerat lorem ullamcorper, sit amet molestie quam facilisis. Fusce vehicula mollis facilisis. Donec vitae interdum dolor. Fusce euismod lacus eget arcu tempor, nec laoreet ex varius. Praesent in rutrum tellus.

<p>Phasellus a ex mauris. Pellentesque odio eros, luctus vitae eros sit amet, consectetur vestibulum nisi. Morbi purus massa, accumsan nec magna vel, ornare euismod libero. Sed pellentesque, dui non semper facilisis, ante metus tincidunt velit, sit amet gravida arcu dolor egestas massa. Etiam imperdiet ipsum tincidunt lorem convallis, at pharetra ligula pretium. Etiam condimentum et nisi id interdum. Donec accumsan massa non viverra ultricies. Ut quis porta magna. Ut in efficitur augue, a varius augue. Fusce ipsum nulla, ornare vel semper vitae, tempor quis dui. Pellentesque vitae elit tincidunt, tincidunt ligula id, pharetra ante. Nam commodo vehicula felis quis sollicitudin. Praesent non tristique leo.

<p>Maecenas mollis augue sit amet risus faucibus facilisis. Sed odio lacus, venenatis et tincidunt a, congue eu tellus. Nam non blandit erat. Etiam et urna et lorem pellentesque porttitor. Quisque tristique accumsan risus a mollis. Donec cursus molestie ornare. Pellentesque pharetra, quam vitae placerat pulvinar, quam enim suscipit nulla, at sollicitudin metus mi in massa. Pellentesque gravida blandit turpis, ac sagittis magna pretium eget. Aliquam convallis tempus lectus, quis semper lectus efficitur ut. Fusce tincidunt cursus sem. Duis quis porttitor ex, sit amet maximus erat. Proin sit amet lobortis lectus, at eleifend nisl. Duis nec facilisis lacus, tincidunt lacinia urna. Quisque a efficitur erat. Vivamus feugiat velit nisi, eu consectetur turpis dignissim id. Donec hendrerit metus eget elit sollicitudin auctor.

＆＃13;

Answer 2

您可以获取元素的顶部位置，然后scroll：

var top = $('#titreArticle').position().top;
$(window).scrollTop( top );

一个工作示例here。

如何滚动到<li>中的某个元素

2 个答案: