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>

从链接中我得到背景颜色，页面高度。我还想获得有关页面上位置的信息，但我无法弄清楚如何获取变量--- var scrolltop的值。

任何人都可以帮助我吗？

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>，应该将视口滚动到页面中另一个元素所在的某个位置。然后你可以获得该元素的位置并滚动到那里而不是硬编码值。

例如，

您想要滚动到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');

Answer 2

你可以获得这个位置，使用此代码

$(this).offset().top;

您可以在此链接上找到有关此功能的更多信息

http://api.jquery.com/offset/

我希望这可能有用。

Answer 3

在唯一的情况下，您无法更改HTML结果：
使用.split(' ')从attr类中检索数据，您不需要'px'和前导零，所以请使用parseInt。

jsBin demo

$(".link").click(function(){

  var myClass   = $(this).attr("class").split(' '); // split class
  var color     = myClass[1];
  var height    = parseInt( myClass[2] , 10);
  var scrolltop = parseInt( myClass[3] , 10); 

  alert( color+' '+height+' '+scrolltop );

});

在所有其他情况下，请使用@Alexander

建议的.data()属性

如何声明变量scrollTop

3 个答案:

jsBin demo