Question

<a href="#scrollDown" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>

当我点击“向上”时，它应该向下滚动并停在ID“向下”。

现在当我点击“向上”时，网址会发生变化。例如（../ loginAction＃scrollDown）。

如何在不更改页面网址的情况下向下滚动到ID“向下”。 href“scrollDown”将不适用于页面URL。

Answer 1

您可以通过获取元素的偏移量然后滚动到它来实现。

 jQuery('#request_search').submit(function(e){
     e.preventDefault(); 


        var s_date=jQuery('#actualfrom').val();
        var e_date=jQuery('#actualto').val();
        var type=jQuery("#type").val();
        var loc=jQuery("#loc").val();



 jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type},  function(data) { 

 jQuery('#report').html(data);});


         });



});

Answer 2

如果你使用href标记，url会改变。你可以使用id标签上下链接，你可以使用jQuery $（＆＃39;＃up＆＃39;）。点击

Answer 3

$(function() {
  $('#up').click(function(){
    $('html, body').animate({
        scrollTop: $("#down").offset().top
    }, 2000);
});
  
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a href="javascript:void(0)" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
  v
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
















<a name="scrollDown" id="down">Stop Here</a>

</body>

Answer 4

网址正在更改，因为这是链接的href属性的值。默认情况下，浏览器使用url哈希的id查找并滚动到div，因此asdf.com/#someid将始终显示顶部带有#someid div的页面。为了避免网址更改并具有相同的功能，您可以使用触发器的自定义属性。

<p custom-target="scrollDown" id="up">Scroll Down</p>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>

然后修改滚动脚本以收听p[custom-target="scrollDown"]点击我正在将触发元素更改为p，因为它不再需要链接。

向下滚动到内容而不更改页面URL

4 个答案: