Fatal编程技术网
  • javascript/
  • Javascript 试图使用锚定标记滚动网页，但它'；这没用

Javascript 试图使用锚定标记滚动网页，但它'；这没用

javascript jquery html css

Javascript 试图使用锚定标记滚动网页，但它'；这没用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在我的网页上设置滚动效果 $（文档）.ready（函数（）{ $（“a”）。在（'click'，函数（事件）{ 如果（this.hash！==“”）{ event.preventDefault（）； var hash=this.hash； $（'html，body'）。设置动画({ scrollTop:$（散列）.offset（）.top }，800，函数（）{ window.location.hash=散列； }); } }); }); /*常规样式*/ * { 保证金：0； 填充：0

我试图在我的网页上设置滚动效果

$（文档）.ready（函数（）{
$（“a”）。在（'click'，函数（事件）{
如果（this.hash！==“”）{
event.preventDefault（）；
var hash=this.hash；
$（'html，body'）。设置动画({
scrollTop:$（散列）.offset（）.top
}，800，函数（）{
window.location.hash=散列；
});
}
});
});

/*常规样式*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体：普通16px无衬线；
颜色：#555；
}
ul，
导航{
列表样式：无；
}
a{
文字装饰：无；
不透明度：0.75；
颜色：#fff；
}
a:悬停{
不透明度：1；
}
a、 btn{
边界半径：4px；
文本转换：大写；
字体大小：粗体；
文本对齐：居中；
背景色：#3f51b5；
不透明度：1；
}
a、 btno{
边界半径：4px；
文本转换：大写；
文本对齐：居中；
背景色：#3f51b5；
不透明度：1；
}
部分{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
填充：100px 80px；
}
节：非（.hero）：第n个子项（偶数）{
背景色：#F5；
}
.电网{
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
人力资源{
宽度：250px；
高度：3倍；
背景色：#3f51b5；
边界：0；
边缘底部：50px；
}
第h3节.标题{
文本转换：大写；
字体：粗体32px“开放式Sans”，无衬线；
边缘底部：30px；
文本对齐：居中；
}
第p节{
最大宽度：775px；
线高：2；
填充：0 20px；
边缘底部：30px；
文本对齐：居中；
}
@介质（最大宽度：800px）{
部分{
填充：50px 20px；
}
}
/*标题样式*/
标题{
位置：绝对位置；
宽度：100%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：35px 100px 0；
动画：1秒后退0.5秒前进；
不透明度：0；
颜色：#fff；
}
@关键帧淡入淡出{
100% {
不透明度：1；
}
}
收割台h2{
字体系列：“流沙”，无衬线；
}
标题导航{
显示器：flex；
右边距：-15px；
}
标题导航李{
利润率：0.15px；
}
@介质（最大宽度：800px）{
标题{
填充：20px 50px；
弯曲方向：立柱；
}
收割台h2{
边缘底部：15px；
}
}
/*英雄风格*/
.英雄{
位置：相对位置；
证明内容：中心；
文本对齐：居中；
最小高度：100vh；
颜色：#fff；
}
.英雄.背景图像{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景尺寸：封面；
z指数：-1；
背景色：#80a3db；
}
.英雄h1{
字体：粗体60px“开放式Sans”，无衬线；
边缘底部：15px；
}
.英雄h3{
字体：普通28px“开放式Sans”，无衬线；
边缘底部：40px；
}
.英雄a.btn{
填充：20px 46px；
}
.英雄内容区{
不透明度：0；
边缘顶部：100px；
动画：1s幻灯片，1s向前；
}
@关键帧滑动{
100% {
不透明度：1；
保证金：0；
}
}
@介质（最大宽度：800px）{
.英雄{
最小高度：600px；
}
.英雄h1{
字体大小：48px；
}
.英雄h3{
字体大小：24px；
}
.英雄a.btn{
填充：15px 40px；
}
}
/*目的地组*/
.目的地{
高度：350px；
填充：20px；
背景剪辑：内容框；
背景尺寸：封面；
背景位置：中心；
}
.目的地.网格李.小型{
弹性基准：30%；
}
.目的地.网格李.大型{
弹性基准：70%；
}
@介质（最大宽度：1100px）{
.目的地.网格李.小，
.目的地.网格李.大型{
弹性基准：50%；
}
}
@介质（最大宽度：800px）{
.目的地.网格李.小，
.目的地.网格李.大型{
弹性基准：100%；
}
}
/*包裹组*/
.包裹.李格{
填充：50px；
弹性基准：50%；
文本对齐：居中；
}
.包裹{
颜色：#8c9eff；
}
.包裹.网格li h4{
字体大小：30px；
利润率：25px0；
}
@介质（最大宽度：800px）{
.包裹.李格{
弹性基准：100%；
填充：20px；
}
}
/*证言组*/
.推荐信.引述{
字体大小：22px；
字体大小：300；
线高：1.5；
利润率：40像素0.25像素；
}
@介质（最大宽度：800px）{
.推荐信.引述{
字号：18px；
利润率：15px0；
}
.推荐书.作者{
字体大小：14px；
}
}
/*接触段*/
.联络表格{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
宽度：60%；
}
.联络表格{
填充：18px 42px；
}
.联络表格输入{
填充：15px；
右边距：30px；
字号：18px；
颜色：#555；
弹性：1；
}
@介质（最大宽度：1000px）{
.联络表格输入{
弹性基准：100%；
利润率：0.20px0；
}
}
/*页脚部分*/
页脚{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
背景色：#607d8b；
颜色：#fff；
填充：20px0；
}
页脚ul{
显示器：flex；
}
页脚ulli{
左边距：16像素；
}
页脚p{
文本转换：大写；
字体大小：14px；
不透明度：0.6；
自对准：居中；
}
@介质（最大宽度：1100px）{
页脚{
弯曲方向：立柱；
}
页脚p{
文本对齐：居中；
边缘底部：20px；
}
页脚ulli{
边际：0.8px；
}
}



山地旅游

  • 

  • 

  • 
山地旅游
不容错过的环球冒险之旅
我们的一些目的地：
厌倦了海洋？平原太平坦了吗？跟我们一起去山里探险吧。以下是一些与我们有过崇高经历的人的照片
    

    

      

    • 

    • 

    • 

    • 

    
旅游套餐
我们提供各种登山套餐。无论你是攀登过珠穆朗玛峰还是根本不知道什么是山，我们都为你准备了一个完美的假期
    

    

      

    • 

      function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

      

      <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>
</head>
<body>

<header>
        <h2 ><a href="#">Mountain Travel</a></h2>
        <nav>
          <li ><a href="#destinations">Tours</a></li>
          <li ><a href="#packages">About</a></li>
          <li ><a href="#testimonials">Contact</a></li>
        </nav>
      </header>

       <section class="destinations" id="destinations">
        <h3 class="title">Some of our destinations:</h3>
        <p>Tired of the ocean? Are the plains too plain? Come along with us on one of our mountain adventures. Here are some pictures from people who have had elevated experiences with us.</p>
        <hr>

        <ul class="grid">
          <li class="small" style="background-image: url(assets/img/mountain1.jpg);"></li>
          <li class="large" style="background-image: url(assets/img/mountain2.jpg);"></li>
          <li class="large" style="background-image: url(assets/img/mountain3.jpg);"></li>
          <li class="small" style="background-image: url(assets/img/mountain4.jpg);"></li>
        </ul>
      </section>

      <section class="packages" id="packages">
        <h3 class="title">Tour Packages</h3>
        <p>We offer a variety of mountaineering packages. Whether you've climbed Everest or don't even know what a mountain is, we've got the perfect vacation for you.</p>
        <hr>

        <ul class="grid">
          <li>
            <i class="fa fa-compass fa-4x"></i>
            <h4>Guided Trips</h4>
            <p>Looking for the complete experience? Take a tour with one of our experts. They'll show you secrets that you're likely to miss otherwise.</p>
          </li>
          <li>
            <i class="fa fa-camera-retro fa-4x"></i>
            <h4>Photo Trips</h4>
            <p>Want to experience nature's beauty without all of that annoying exercise? Take a photo tour on one of our mountain buses.</p>
          </li>
          <li>
            <i class="fa fa-bicycle fa-4x"></i>
            <h4>Biking Trips</h4>
            <p>If bicycles are more your speed, consider taking a tour through one of our mountain bike paths. We'll provide the bikes, and lunch too!</p>
          </li>
          <li>
            <i class="fa fa-flag-checkered fa-4x"></i>
            <h4>Racing Trips</h4>
            <p>Got a competitive spirit? Sign up for one of our mountain marathons! Try to reach the summit before anyone else.</p>
          </li>
        </ul>
      </section>

      <section class="testimonials" id="testimonials">
        <h3 class="title">Testimonials from our adventurers:</h3>
        <hr>
        <p class="quote">Wow! This tour made me realize how much I love mountains. After going on one of these tours, I can safely say that they are my favorite geographic feature, and my favorite word that starts with M.</p>
        <p class="author">- Joe Gatto</p>
        <p class="quote">I never understood why people cared so much about mountains. But then I went on one of these tours. Now I can't understand people who <em>don't</em> care about mountains!</p>
        <p class="author">- Brain Quinn</p>
        <p class="quote">If you want to understand the universe, head to the mountains. I mean, seriously. It's like, woah. You know? It's like that.</p>
        <p class="author">- Sal Volcano</p>
      </section>

</body>
</html>