JQuery का उपयोग करके एक एंकर को पृष्ठ को ऊपर या नीचे स्क्रॉल कैसे करें?

Question

जब आप किसी स्थानीय एंकर के लिंक पर क्लिक करते हैं, तो पृष्ठ के ऊपर या नीचे एक स्लाइड प्रभाव शामिल करने का एक तरीका खोज रहा हूं।

मुझे कुछ पसंद है जहाँ आपके पास एक लिंक है जैसे:

<a href="#nameofdivetc">link text, img etc.</a>

शायद एक वर्ग के साथ जोड़ा गया है तो आप जानते हैं कि आप चाहते हैं कि यह लिंक एक स्लाइडिंग लिंक हो:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

फिर यदि इस लिंक पर क्लिक किया जाता है, तो पृष्ठ आवश्यक स्थान पर ऊपर या नीचे स्लाइड करता है (यह एक div, शीर्ष, पृष्ठ के शीर्ष आदि हो सकता है)।

---

यह वही है जो मैंने पहले किया था:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Answer 1

विवरण

आप इसका उपयोग कर सकते हैं jQuery.offset()और jQuery.animate()।

JsFiddle प्रदर्शन की जाँच करें ।

नमूना

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

अधिक जानकारी

• jsFiddle प्रदर्शन
• jQuery.offset ()
• jQuery.animate ()

Comments

यह भी पेज में सभी आंतरिक लंगर लिंक के साथ काम करने के लिए सामान्य बनाया जा सकता है:$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });

— बार्डो

@ बार्डो, इसे कैसे लागू किया जाना चाहिए? मैंने आपके साथ dkmaack के समाधान को बदल दिया है, लेकिन स्लाइडिंग वहाँ नहीं है (लंगर स्वयं कार्यात्मक है)। मैं क्या खो रहा हूँ?

— याकूब

@ बार्डो भी जोड़ते हैं history.pushState(null, null, dest);क्योंकि आप डिफ़ॉल्ट स्थान हैश परिवर्तन को रोक रहे हैं

— माइक कौसर

FYI करें @ bardo के समाधान के अलावा, आप हैश जब नवीनतम jQuery की तरह तो का उपयोग कर से बचने चाहिए, $ ( "एक [href ^ = \\ #]") stackoverflow.com/questions/7717527/...

— jaegs

Html और body दोनों को एनिमेट करने का उद्देश्य क्या है? एक ऐसी स्थिति दिखती है जहाँ हम नहीं जानते कि हम क्या करते हैं और बस यह सब करते हैं। यह कई scollings शुरू हो सकता है?

— योगो

Answer 2

यह मानते हुए कि आपकी href विशेषता उसी नाम से टैग आईडी के साथ एक div से लिंक कर रही है (हमेशा की तरह), आप इस कोड का उपयोग कर सकते हैं:

एचटीएमएल

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT - (Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

Comments

बहुत सरल लेकिन शक्तिशाली समाधान, जो पूर्ण नियंत्रण की अनुमति देता है। मुझे लगता है कि इस जवाब को और बढ़ाना चाहिए।

— क्रोनफी

सहमत, यह सबसे अच्छा समाधान है और इससे मुझे बहुत मदद मिली

— शायद

यह काम करता है लेकिन उपयोग करने के उद्देश्य को हरा देता है name। जब आप उपयोग करते हैं <a name="something"></a>, तो आप इसे बाहर से भी संदर्भित कर सकते हैं , लेकिन आपका समाधान यह प्रदान नहीं करता है।

— रामतिन

Answer 3

इससे मेरा जीवन बहुत आसान हो गया। आप मूल रूप से बहुत सारे कोड के बिना अपने एलिमेंट्स आईडी टैग और उसके स्क्रॉल तक डाल देते हैं

http://balupton.github.io/jquery-scrollto/

जावास्क्रिप्ट में

$('#scrollto1').ScrollTo();

अपने html में

<div id="scroollto1">

यहाँ मैं पृष्ठ नीचे सभी तरह से हूँ

Answer 4

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

Comments

वास्तविक सवाल, क्या दूसरी पंक्ति में कुछ भी नहीं करता है?

— रोब

@ रब जावास्क्रिप्ट में स्ट्रिंग इंटरपोलेशन नहीं है, इसलिए +स्ट्रिंग्स या वार्स के साथ उपयोग करके उन्हें समतल किया जाता है, जैसे "#some_anchor":। वास्तव में, दूसरे कंसट anchor_id + ""की जरूरत नहीं है, मेरा मानना ​​है।

— onebree

धन्यवाद @onebree यह दूसरा कॉन्कटैट था जिसके बारे में मैं सोच रहा था :)

— Rob

Answer 5

आपको यह भी विचार करना चाहिए कि लक्ष्य में एक पैडिंग है और इस प्रकार positionइसके बजाय का उपयोग करें offset। आप एक संभावित नौसैनिक बार का भी हिसाब कर सकते हैं जो आप लक्ष्य को ओवरलैप करना नहीं चाहते हैं।

const $navbar = $('.navbar');

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})

Comments

IMHO सबसे अच्छा समाधान क्योंकि इसे अतिरिक्त कक्षाओं की आवश्यकता नहीं है और फिक्स्ड नेबर्स के लिए सीएसएस में पैडिंग गणित

— केएसपीआर

लेकिन यह url में एंकर टैग को फिर से नहीं लिखता है। history.pushState({}, "", this.href);यूआरएल को अद्यतन रखने के लिए जोड़ें

— केएसपीआर

Answer 6

JQuery के साथ मेरा दृष्टिकोण केवल सभी एंकर लिंक को तुरंत कूदने के बजाय स्लाइड करना है

यह वास्तव में सेंटी नुनज़ द्वारा उत्तर के समान है, लेकिन यह अधिक विश्वसनीय है ।

सहयोग

• बहु-ढांचा पर्यावरण।
• पेज लोड होने से पहले।

<a href="#myid">Go to</a>
<div id="myid"></div>

// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);

Answer 7

मैं अपने मूल कोड के साथ अटक गया और इस कोड का उपयोग करने वाले 'बैक-टू-टॉप' लिंक में एक फीका भी शामिल था और यहाँ से थोड़ा सा:

http://webdesignerwall.com/tutorials/animated-scroll-to-top

अच्छा काम करता है :)

Answer 8

आप जोड़ सकते हैं offsetTop और scrollTop मूल्य मामले में आप नहीं पूरे पृष्ठ, बल्कि कुछ नेस्टेड सामग्री एनिमेट कर रहे हैं।

जैसे:

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

Answer 9

एसएस स्लो स्क्रॉल

इस समाधान के लिए एंकर टैग की आवश्यकता नहीं है, लेकिन आपको अपने HTML में गंतव्य तत्व आईडी के साथ मेनू बटन (मनमाने ढंग से विशेषता, उदाहरण में 'ss) से मेल खाना चाहिए।

ss="about" आपको ले जाता है id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});

.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

बेला

https://jsfiddle.net/Hastig/stcstmph/4/

Answer 10

यहाँ समाधान है कि मेरे लिए काम किया है। यह एक जेनेरिक फ़ंक्शन है जो aकिसी नाम का जिक्र करते हुए सभी टैग के लिए काम करता हैa

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

नोट 1: सुनिश्चित करें कि आप "अपने html में दोहरे उद्धरण चिह्नों का उपयोग करते हैं। यदि आप एकल उद्धरणों का उपयोग करते हैं, तो कोड के उपरोक्त भाग को बदल देंvar target = $("a[name='" + name.substring(1) + "']");

नोट 2: कुछ मामलों में, खासकर जब आप बूटस्ट्रैप से चिपचिपे बार का उपयोग करते हैं, तो नाम aनेविगेशन बार के नीचे छिपा होगा। उन मामलों (या किसी भी समान मामले) में, आप इष्टतम स्थान प्राप्त करने के लिए अपने स्क्रॉल से पिक्सेल की संख्या कम कर सकते हैं। उदाहरण के लिए: शीर्ष पर छोड़े गए 15 पिक्सेल $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');के targetसाथ ले जाएगा ।

Answer 11

मैंने इस उदाहरण को https://css-tricks.com/snippets/jquery/smooth-scrolling/ पर कोड की हर पंक्ति को समझा। मुझे यह सबसे अच्छा विकल्प लगा।

https://css-tricks.com/snippets/jquery/smooth-scrolling/

आप मूल जा सकते हैं:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

या jquery के साथ:

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        && location.hostname == this.hostname
       ) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

Answer 12

ठीक सरल विधि है: -

क्लिक फ़ंक्शन (Jquery) के भीतर: -

$('html,body').animate({scrollTop: $("#resultsdiv").offset().top},'slow');

एचटीएमएल

<div id="resultsdiv">Where I want to scroll to</div>

Answer 13

$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

इसे यहाँ टेस्ट करें:

http://jsbin.com/ucati4

Comments

कृपया हस्ताक्षर शामिल न करें, विशेष रूप से लिंक वाले लोग ... और विशेषकर असंबंधित लिंक वाले। आप अपनी प्रोफ़ाइल में उस तरह की चीज़ रख सकते हैं।

— एंड्रयू बार्बर

पूछा गया प्रश्न पृष्ठ के शीर्ष पर स्क्रॉल करने का तरीका नहीं था, यह था कि एक आईडी के साथ एक एंकर को कैसे स्क्रॉल किया जाए

— user1380540

क्या कोई ऐसा तरीका है जो मैं वर्डप्रेस में उपयोग कर सकता हूं? क्या मैं अपनी साइट पर जोड़ रहा हूं लेकिन यह वास्तव में काम नहीं करता है। यहाँ लिंक: scentology.burnnotice.co.za

— यूजर एजेंट

Answer 14

निम्नलिखित समाधान मेरे लिए काम किया:

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );