jquery - 如何声明变量scrollTop

Question

我有这个功能。

$(".link").click(function(){
            var page = $(this).attr("id");
            var color = $(this).attr("class");
            var height = $(this).attr("class");
            var scrolltop = 100;
            color = color.substr(5,6);
            height = height.substr(12,6);
            $('#all_pages').animate({left: (page-1)*(-650) }); 
            $("body").animate({backgroundColor: '#'+color});
            $('html, body').animate({scrollTop: scrolltop}, 'slow');
            $("#container").animate({height: height});
            $("#all_pages").animate({height: height});
            $("#menu ul li").removeClass('active');
            $(this).addClass('active'); 
        });

以及这些链接:

<div id="menu">
            <ul>
                <li id="1" class="link 99CCCC 0620px 0000px active">Home</li>
                <li id="2" class="link FF9933 0890px 0200px">Services</li>
                <li id="3" class="link 66FFCC 1265px 0210px">Tourism</li>
                <li id="4" class="link 99FF99 1580px 0220px">Prices</li>
                <li id="5" class="link FF9999 0485px 0230px">Ask question</li>
                <li id="6" class="link 00CCFF 0450px 0240px">Partners</li>
                <li id="7" class="link EBF291 0450px 0250px">FAQ</li>   
                <li id="8" class="link FFFF66 0850px 0260px">Contact Us</li>                            
            </ul>
        </div>

从链接中我获取背景颜色、页面高度。我也想获取页面上位置的信息，但我不知道如何获取变量的值 --- varscrolltop。

有人可以帮助我吗？

Answer 1

您可以使用data-*属性来保存自定义属性的值。

使用

<li data-page="1" data-color="99CCCC" data-height="620" data-position="0" class="link active">Home</li>

而不是

<li id="1" class="link 99CCCC 0620px 0000px active">Home</li>

使用.data()从 JavaScript 获取属性。

$(".link").click(function() {
    /* cache the selector */
    var $this = $(this);
    /* Get the properties */
    var page = $this.data("page");
    var color = $this.data("color");
    var height = $this.data("height");
    /* I suppose this is what you wanted */
    var scrolltop = $this.data("position");
    ...
});​

<小时/>

如果通过单击每个 <li>应该将视口(viewport)滚动到页面中另一个元素所在的某个位置。然后，您可以获取该元素的位置并滚动到那里，而不是对值进行硬编码。

例如，

您想要滚动到 id 的元素设置为home .

<div id="home">

设置 data-position属性为其选择器，#home .

<li data-page="1" data-color="99CCCC" data-height="620" data-position="#home" class="link active">Home</li>

使用选择器获取元素，使用 .offset() 获取它的位置并滚动到它。

var $target = $($this.data("position"));
var scrolltop = $target.offset().top;
$('html, body').animate({ scrollTop: scrolltop }, 'slow');