使用< a>< / a>滚动单个页面网站 [英] using <a></a> to scroll a single page website

问题描述

我正在单页网站上工作，并遇到< a>< / a> 标签的问题。

I am working on a single page website and have a problem with the <a></a> tags.

我希望当用户点击一个Div时，他们会被带到页面的不同部分。目前，我的< a>< / a> 就是这样。

I would like when the user clicks a Div they get taken to a different part of the page. At the moment I have <a></a> that do that.

    '<a href="#divid">About</a>'  

css-tricks.com/examples/SmoothPageScroll/#two这是我用来滚动页面的一个很好的例子

css-tricks.com/examples/SmoothPageScroll/#two this is a good example of i am using to scroll thru the page

但每次我把这些标签围绕我的div中的图像，所有div点击属​​性停止工作。
示例：

but every time I place these tags around an image in my div all the div click properties stop working. Example:

<div id="about-button" class="button">
    <a href="#about"><img src="images/menu-about.png"
                          alt="about" class="button"/></a>
</div>

我可以说这是由于 a

I can tell this is happening due to the a tag being on top of the div.

我的问题是有办法让< a> 标签坐下或与div并肩工作，仍然工作??

My question is there a way to make the <a> tag sit under or work side by side with the div and still work??

或者如果没有办法做到这一点。我可以做的任何阅读，或更好的方法来导航到页面的特定部分，而不使用''标签

or if there is no way to accomplish that. any reading I can do or examples of a better way to navigate to a specific part of the page with out the use of the '' tags

您可以尝试如下所示：

you can try something like this:

$('a').click(function(e) {
   e.preventDefault();
   var scr = $('#target').offset().top; // top offset of the target element
    $('html, body').animate({scrollTop: scr}, 1000)
})

DEMO

这篇关于使用< a>< / a>滚动单个页面网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！