كيف يمكنني إضافة الرسوم المتحركة التمرير الارتباط معين، الأفقية والرأسية، وذلك باستخدام مسج؟

Question

ولقد حصلت على هذا البرنامج النصي على موقعي :

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }

  $('[href*=#]').each(function() {
    if ( (filterPath(location.pathname) == filterPath(this.pathname))
      && (location.hostname == this.hostname)
      && (this.hash.replace(/#/,'')) ) {

      var $targetId = $(this.hash), 
        $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length 
        ? $targetId 
        : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {

        var divOffset = $target.parent().offset().top;
        var pOffset = $target.offset().top;
        var pScroll = pOffset - divOffset;

        $(this).click(function() {
          $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
          return false;
        });
      }
    }
  }); 
});

وكان يعمل بشكل جيد، ومخطوطات وdivs الملاحة الرئيسية صعودا وهبوطا الخ ولكن أريد divs داخل قسم الخدمات انتقل إلى اليسار واليمين. وأود أيضا أن أضيف شريط التمرير إلى قسم محفظة لكن رمز أعلاه على قواعد أي تعليمات برمجية إضافية كما انها تطبق على جميع علامات <a href...>. كيف أحدد فقط أنها لul mainnav؟

وشكرا مقدما

Answer 1

وتغيير محدد من '[أ href = * #]' إلى 'ul.mainnav [أ href = * #]'.

وكيفية كتابة محددات التي تعطي فقط لأنك العناصر التي تريد وربما كان الشيء الأكثر أهمية أن يعرف عند استخدام مسج. يمكنني أن أوصي فقط قراءة ثائق مسج على محددات (ولكن ينصح الأشياء الأخرى أيضا).

Answer 2

وافترض أن لديك البنية التالية وتريد تطبيق وظيفة فقط على رابط "فو". وترك سائر يمسها.

<div id="mainnav">
  <ul>
    <li>
      <a href="#">foo</a>
    </li>
    <li>
      <a href="http://www.example.com">foo2</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">foo3</a>
    </li>
  </ul>
  <a href="#">foobar</a>
</div>

وثم هل يمكن استخدام مثل هذا الاختيار مسج

$("#mainnav > ul:first").find("a[href*=#]").css('color','red');

والمكسور إلى قطع

$("#mainnav > ul:first")
//give me the element with id mainnav and then the first ul child element of it

.find("a[href*=#]")
//find all link elements in this ul which have href set to #

.css('color','red');
//and set their color to red

Answer 3

وأنا لست متأكدا من أنني أفهم سؤالك بالضبط، ولكن إذا كنت تبحث عن وسيلة لايجاد روابط فقط في عنصر معين، يمكنك توسيع محدد الخاص بك:

// Assuming your mainnav ul has id="mainnav"
$('ul#mainnav [href*=#]').each(...);

وهذا هو الغالب إصلاح مؤقت اذا سألتني، ولكن. عاجلا أم آجلا قد ترغب في تطبيق تأثير لعناصر أخرى. هل يمكن أن تضيف سمة class للعناصر التي تريد التأثير على:

<a href="#" class="scroll-effect">...</a>

وبعد ذلك حدد لهم مثل ذلك:

$('.scroll-effect').each(...);