动画自动滚动到div onclick [英] animated autoscroll to div onclick

问题描述

我有一个固定位置的简单菜单，里面有一些文本，并且此菜单下有一些框(divs). 我正在搜索一个代码，当我单击菜单内的文本之一时，页面会自动向下滚动到div的div，确实我找到了此代码，但是它是不完整的，因为当您想要将页面自动滚动到div时，页面滚动到另一个div到该div，它无法自动滚动，我的意思是它不会向上滚动，只能向下滚动. 菜单代码和文本:

I have a simple menu with fixed position and some text inside it and some boxes under this menu(divs). I'm searching for a code that when I click on one of the texts that inside menu the page autoscrolls to a div of the divs down, indeed I found this code but it's incomplete because when the page autoscroll to a div if you want the page to scroll to another div up to this div it can't autoscroll, I mean it doesn't scroll up only scrolls down. The code of the menu and the text:

<style>
#menu {
    background-color: #ccc;
    position:fixed;
    width:100%
}

.menutext {
    padding:25 40 0 !important;
    display:inline-block;
}

.alldivs {
    width:300px;
    height:200px;
    background-color:a9a9a9;
}
</style>

<div id="menu">
    <div class="menutext">Auto-scroll to (DIV1) onclick on me</div>
    <div class="menutext">Auto-scroll to (DIV2) onclick on me</div>
    <div class="menutext">Auto-scroll to (DIV3) onclick on me</dive>
    <div class="menutext">Auto-scroll to (DIV4) onclick on me</div>
</div>

<br><br><br>

<div class="alldivs"><div id="DIV1">DIV1</div></div>
<div class="alldivs"><div id="DIV2">DIV2</div></div>
<div class="alldivs"><div id="DIV3">DIV3</div></div>
<div class="alldivs"><div id="DIV4">DIV4</div></div>

简而言之，我想当我按自动滚动到(DIV1)onclick on me"时将页面自动滚动到div"DIV1"，而当我按自动滚动到(div1)onclick on me"时页面自动滚动到"DIV3" 但是请注意***，例如，当我想要向上滚动以进行该操作时所能执行的代码(向上滚动)时，例如:当我按自动滚动至(DIV3)单击我时"时，页面滚动到"DIV3"，但是当我按自动滚动到(DIV2)onclick on me"时，代码应该能够让页面滚动到"DIV2".(还要注意，它是固定菜单)

Simply, I want when I press on "Auto-scroll to (DIV1) onclick on me" the page autoscroll to the div "DIV1" and when I press on "Auto-scroll to (DIV3) onclick on me" the page autoscroll to "DIV3" BUT NOTE THAT*** WHEN I WANT TO SCROLL UP TO A DIV UP THE CODE ABLE TO DO THAT(TO SCROLL UP), for example:when I press on "Auto-scroll to (DIV3) onclick on me" the page scrolls to "DIV3" but then when I press to "Auto-scroll to (DIV2) onclick on me" the code should be able to let the page scrolls to "DIV2".(also note that it's fixed menu)

推荐答案

检查此内容:

Check this:

jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - 59}, 800); 
    });
});

这篇关于动画自动滚动到div onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！