刷新页面时自动滚动（HTML、CSS、JS、JQuery）

Question

每当我单击进入页面某个区域并刷新它的 div 框时，它总是会回到同一个位置。 file:///C:/Users.../index.html#group1 当我单击该框时，这是 url，这是在我单击框 file:///C:/Users/.../index 之前。 html。 我怎样才能解决这个问题？

顺便说一句，我的复选框也有类似的问题。 每当我向下滚动以单击其他复选框时，它总是会滚动回顶部。 我怎么能阻止它？

编辑：这是我的样子： https://i.stack.imgur.com/ORLxv.gif

代码： enter code here https://jsfiddle.net/mhirai/1gmawr9e/4/

Answer 1

只需检查源代码并查看标签指向的位置或使用 JavaScript 的 div，它的 href/path 指向 '#group1' 这就是当您单击 div 时页面会刷新和滚动的原因

必须有一个 id 为“group1”的元素

Answer 2

从您提供的图像来看，#group1 似乎正试图将您的浏览器指向 index.html#group1。 如果这不是您的预期行为，您可以将<a href="#group1">更改为...

<a href="javascript:void(0)" onclick="console.log('test')">

您可以将其替换为您自己的 function 调用。 我只是使用 console.log 来指出，如果您将值替换为 javascript:void(0)，则 href 将停止刷新您的页面。

您需要提供有关如何格式化复选框以使其行为的信息。 它可能与<a href="3">...</a>中的href标记相关联，在这种情况下，它的行为方式与您的第一个问题相同，并且在这种情况下的解决方案是相同的当且仅当我正确理解您时，我为您的第一个问题提供了解决方案。

如果您打算滚动到页面元素，请执行以下操作：

<a href="javascript:void(0)" onclick="scrollToDiv('#group1')">

function scrollToDiv(div){
   $('html, body').animate({ scrollTop: $(div).offset().top }, 2000);
}

您提供的代码非常复杂，但请尝试将其添加到您的 javascript 中。 它会模仿你想要的行为：

$(function(){
    $('body').append('<div id="pagebottom" class="bottoms" style="border:1px solid black; height:700px; padding:30px;">Bottom div!</div>');
});
function scrollToDiv(div){
    console.log(div);
   setTimeout(function(){
    $('html, body').animate({
        scrollTop: $(div).offset().top }, 100);

   },100);
}

$(document).on('click', function (e) {
    e.preventDefault();
    scrollToDiv("#pagebottom");
    if ($('#122').is(":checked")) {
        $("#123").prop('disabled', false);
        $("#sci").prop('disabled', false);
    }
    else {
        
        $('#123').prop('checked', false); $("#123").prop('disabled', true);
        $('#sci').prop('checked', false); $("#sci").prop('disabled', true);
    }
});