自动滚动到Div

我在一个锚标签中有一个按钮，当我点击按钮时，我希望它顺利地滚动到与id“bodycontainer”div。自动滚动到Div

问题是与JavaScript我想，任何想法？

$(function(){ 
 
    $('.icon-menu').click(function() { 
 
    $('.menu').animate({ 
 
     left: "0px" 
 
    }, 200); 
 

 
    $('body').animate({ 
 
     left: "285px" 
 
    }, 200); 
 
    }); 
 

 
    $('.icon-close').click(function() { 
 
    $('.menu').animate({ 
 
     left: "-285px" 
 
    }, 200); 
 

 
    $('body').animate({ 
 
     left: "0px" 
 
    }, 200); 
 
    }); 
 
    
 
    $('#bodycontainer').click(function() { 
 
    var target = $(this.hash); 
 
    target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); 
 
    if (target.length) { 
 
     $('html,body').animate({ 
 
     scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
    } 
 
    }); 
 
});

body { 
 
    font-family: 'Nunito', sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
head { 
 
    font-family: 'Nunito', sans-serif; 
 
    height: 0px; 
 
    width: 0px; 
 
    margin: 0; 
 
} 
 

 
#wrapper{ 
 
    overflow: auto; 
 
} 
 
.introcontainer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), 
 
    url("images/image.png") no-repeat; 
 
    background-size: 100% auto; 
 
} 
 

 
#text { 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 35%; 
 
    font-family: 'Nunito', sans-serif; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.introcontainer button { 
 
    position: absolute; 
 
    left: 22%; 
 
    top: 100%; 
 
    width: 250px; 
 
    height: 47px; 
 
    color: white; 
 
    font-family: 'Nunito', sans-serif; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    background-color: Transparent; 
 
    -webkit-transition-duration: 0.6s; 
 
    transition-duration: 0.6s; 
 
    cursor: pointer; 
 
} 
 

 
.introcontainer button:hover { 
 
    background: rgba(255, 255, 255, 0.35); 
 
} 
 

 
.menu { 
 
    font-family: 'Nunito', sans-serif; 
 
    background: #202024 url('images/menu-background.png') repeat left top; 
 
    left: -285px; 
 
    height: 100%; 
 
    position: fixed; 
 
    width: 285px; 
 
    font-size: 15px; 
 
} 
 

 
.menu ul { 
 
    border-top: 1px solid #636366; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #636366; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 45px; 
 
    padding-bottom: 3px; 
 
    padding-left: 20px; 
 
    padding-top: 3px; 
 
} 
 

 
.menu a { 
 
    color: #fff; 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.icon-close { 
 
    cursor: pointer; 
 
    padding-left: 225px; 
 
    padding-top: 10px; 
 
} 
 

 
.icon-menu { 
 
    width: 75px; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 16px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
    padding-top: 25px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.icon-menu i { 
 
    margin-right: 5px; 
 
    top: 20: 
 
} 
 

 
#bar { 
 
    text-align: center; 
 
} 
 

 
#bodycontainer { 
 
    position: absolute; 
 
    top: 100vh; 
 
    left: 0; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background: red; 
 
}

<!Doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
<meta charset="utf-8"> 
 

 
<title>J-Coding</title> 
 
<meta name="author" content="John Murray"> 
 
<link href="https://fonts.googleapis.com/css?family=Nunito" 
 
    rel="stylesheet"> 
 
<link rel="stylesheet" type="text/css" href="homepage-menu.css"> 
 

 
</head> 
 
<body> 
 

 
<div class="introcontainer"> 
 
    <div class="menu" id="sidenav"> 
 
    <div class="icon-close"> 
 
     <img src="images/closing-icon.png"> 
 
    </div> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="map.html">Map</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="icon-menu"> 
 
    <img id="icon-image" src="images/menu-icon.png"> 
 
    </div> 
 

 
    <div id="text"> 
 
    <h1>Hi, Welcome to J-Coding.</h1> 
 
    <h3> 
 
     My name is John.<br /> On my free time I like to fly my drone, code, and game. 
 
    </h3> 
 
    <a href="#bodycontainer"> 
 
     <button id="start">Lets get Started</button> 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<div id="bodycontainer">testing testing testing</div> 
 

 
<script src="\\path\to\the\jquery.scrollTo.js file"></script> 
 
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script> 
 
<script> 
 
window.jQuery 
 
|| document 
 
.write('<script src="js/jquery-3.2.0.js"><\/script>'); 
 
</script> 
 
<!-- Loads CDN, if CDN fails to load, load local version --> 
 

 
<script src="js/homepage-menu.js"></script> 
 

 
</body> 
 
</html>

来源

2017-04-02 John Mason

如果你真的尝试运行你的榜样，你会看到，这个问题就行228在位置66（你在＃bodycontainer的click上定义'target'）：'不能读取undefined'的属性'substr'。 –

ty，也看到了其他的错误 –

非常复杂的过它， JS应该像

$('#start').click(function() { 
    $('html,body').animate({ 
     scrollTop: $('#bodycontainer').position().top 
    }, 1000); 

});

来源

2017-04-02 22:52:22

自动滚动到Div

回答

相关问题