平滑滚动到

我想要的是通过单击按钮它将平滑滚动到下一节，而不更改背景图像。与此类似; http://www.dada-data.net/en/平滑滚动到

我已经能够做出一个点击事件滚动到一个新的页面，但似乎无法让部分在同一背景上滚动。

在此先感谢您的帮助！

HTML

<section id="section01" class="demo"> 

    <div class="hero"> 
    <img src="/Users/jbeez/desktop/portfolio/JMB_B.png" class="jmb"> 
    </div> 

    <a href="section02"><span></span>Click</a> 

</section> 

<!-- end of section 1 --> 

<section id="section02" class="demo"> 
    <div> 
    <h1>Hello world</h1> 
    </div> 
</section>

JAVASCRIPT

$(function() { 
    $('a[href*=#]').on('click', function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); 
    }); 
});

CSS

#section01 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center/cover no-repeat;} 
    #section02 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center/cover no-repeat;} 
    #section03 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center/cover no-repeat;} 

.demo a { 
     position: absolute; 
     bottom: 20px; 
     left: 50%; 
     z-index: 2; 
     display: inline-block; 
     -webkit-transform: translate(0, -50%); 
     transform: translate(0, -50%); 
     color: #fff; 
     font : normal 400 20px/1 'Josefin Sans', sans-serif; 
     letter-spacing: .1em; 
     text-decoration: none; 
     transition: opacity .3s; 
    } 
    .demo a:hover { 
     opacity: .5; 
    } 

    #section01 a { 
     padding-top: 60px; 
    } 
    #section01 a span { 
     position: absolute; 
     top: 0; 
     left: 50%; 
     width: 24px; 
     height: 24px; 
     margin-left: -12px; 
     border-left: 1px solid #fff; 
     border-bottom: 1px solid #fff; 
     -webkit-transform: rotate(-45deg); 
     transform: rotate(-45deg); 
     box-sizing: border-box; 
    } 



    #section02 a { 
     padding-top: 60px; 
    } 
    #section02 a span { 
     position: absolute; 
     top: 0; 
     left: 50%; 
     width: 46px; 
     height: 46px; 
     margin-left: -23px; 
     border: 1px solid #fff; 
     border-radius: 100%; 
     box-sizing: border-box; 
    } 
    #section02 a span::after { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     content: ''; 
     width: 16px; 
     height: 16px; 
     margin: -12px 0 0 -8px; 
     border-left: 1px solid #fff; 
     border-bottom: 1px solid #fff; 
     -webkit-transform: rotate(-45deg); 
     transform: rotate(-45deg); 
     box-sizing: border-box; 
    }

来源

2017-08-23 55-C

由于问题已解决，因此您应将其中一个答案标记为[accepted]（https://stackoverflow.com/help/someone-answers）。 –

像其他人说...的#是非常缺少。

<a href="#section02"><span></span>Click</a>

然后，在你使用的属性选择，有一定的行情这个#身边缺少你想要的目标。

$("a[href*='#']")

CodePen代码固定。

来源

2017-08-23 21:33:12

啊！尴尬的错误。谢谢您的帮助。完美工作 –

试图改变您的href，这样的：

<a href="#section02"><span></span>Click</a> 

$(".your element").click(function() { 
    $('html, body').animate({ 
     scrollTop: $(this).attr("href").offset().top 
    }, 2000); 
});

来源

2017-08-23 21:22:48 user8455694

感谢您的帮助！完美地工作！ –

与哈希试试这个：

<a href="#section02"><span></span>Click</a>

来源

2017-08-23 21:25:35 Kenzo

回答

相关问题